Images are hugely important to websites. If you are new to working on websites, it pays to get educated about what is the ideal image to upload. There’s a lot more to images than simply what you see. To find out more, read on, or skip to the summary at the end. These are recommendations and not everything is a hard and fast rule.
If in doubt – Google it. There’s a world of information out there and this is just one person’s opinion.
I am not a lawyer nor can I offer any legal advice. That said, in simple terms, you are unlikely to have any issues if you only use photographs you have taken or images that you have an appropriate license that you have paid for. There are free online image sources available, but you still need to be very sure that you can use the images for your website or other purposes. There are people who attempt to make a living suing other people for breach of copywrite on images they own. It pays to be 100% sure you are not breaching copywrite. I would seek legal advice if I was in any way uncertain.
If you’re going to use a logo from someone else’s company, be sure to ask their permission to use it first.
Use of meaningful names
Images should have meaningful names. The naming convention is up to you, but it should be consistent and meaningful. Property images might have the name of the property with -001, -002, etc tacked on the end for images of the same property. Or you could use property address with -front-door, etc. Images of people would have the names of the people if known or descriptors. DSC-05324 is a meaningless name and that naming convention should be avoided. 123-Main-Street-Brisbane-001-front-door.jpg, 123-Main-Street-Brisbane-002-hallway.jpg, etc is a reasonably good naming convention. You don’t need to call something ‘image of man walking with a dog’, instead use ‘man walking with dog’.
When images are uploaded, it is ideal to enter alt-text. This text is displayed when images aren’t displayed. It is typically used by screen readers and allows search engines like Google to better crawl and rank your website.
Ideal image file size
Image file size should really be down lower than 200KB at a maximum, but preferably closer to 100KB or under. If your site is very image heavy, then this can be blown out to 300KB. Image file size is critical in a country like Australia with generally poor internet speeds. A 22MB image file size will add nothing to your website and only drive people away.
Be mindful of page size
Keep in mind page size. If you have 20 images on a page at 300KB that takes your images on the page alone to approximately 6MB. That page will load slowly for most people and most people don’t wait for slow pages to load. This is not a rule, but something to consider. What is an ideal website page size? Perhaps around 2MB. See: https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/
Ideal image pixel size
Images should ideally not be any bigger than 1920px wide. The height of an image is less important due to scrolling. Images can be larger, but it is important to think about how many of your viewers will have a screen that is capable of showing bigger images. Virtually nobody has a screen resolution of 5000px. If you look through this https://www.hobo-web.co.uk/best-screen-size/ you’ll not see a resolution wider than 1920px mentioned, although newer devices do go higher.
Use JPEG (.jpg) for most images. You only need to use PNG images if transparency is part of the image – for instance an image for a button with rounded corners.
JPEG image quality of 70 should be adequate for viewing on a website. Don’t be afraid to experiment. It comes down to what you are happy with, bearing in mind the impact it will have on page load speed, etc.
Image resizing tools
Free offline image resizer program
Online image resizers
NOTE: It is important to note that a website is not a file server. It is not a storage device and it does not have endless storage capacity. Part of what you are paying for with hosting is the size of your site and the bigger the size of your site, the more you pay.
The size of your site also impacts the speed of your site. You can pay for more resources to speed up your site but keeping your site lean will have a similar effect.
Optimizing images is a simple way to make your site the best it can be.
Images should be:
- Owned by you or you have written permission or a license to use it
- JPG, or PNG if transparency required
- JPG quality of 70
- 1920px wide maximum
- 100KB to 300KB in file size, preferably under 200KB
- Have a meaningful name
- Have meaningful alt-text added once uploaded to site