Images are of critical importance to your website. Not only will they help tell your story to your customers, but there are also technical considerations you need to keep in mind to keep your website performing its best. To find out more, read on – or skip to the summary at the end. Keep in mind, these are recommendations only – not everything is a hard and fast rule.

Check the copyright

We are not lawyers, so we can’t give you legal advice. That said – it is critical that you have the right to use an image on your website.

You are unlikely to have any issues if you only use photographs you have taken or images that you have an appropriate license for. There are free online image libraries 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 copyright on images they own. It pays to be 100% sure you are not breaching copyright. Always read the terms of use and seek legal advice if you are ever in doubt.

Don’t use logos without permission

If you’re going to display another company’s logo on your website or in your promotional material, be sure to ask their permission. It doesn’t matter if you are their client, or if you are working with them – you don’t have permission to use their logo unless they explicitly give you permission. And always get it in writing – just in case.

Give your images meaningful names

Giving your images meaningful names will make it easier for you to find files in the future, and to keep your website clean of images no longer in use. Searching for key words is better than manually scrolling through hundreds, sometimes thousands of images to find the ones you need.

The naming convention is up to you, but it should be consistent and meaningful.

For example, for property images, you might name your image the name of the property with -001, -002, etc added 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.

Shorten names where you can, without losing the meaning – for example, you don’t need to call something ‘image of man walking with a dog’, instead use ‘man walking with dog’.

The name of images can also have an effect on your site’s SEO – for more information read this article: https://shuttermuse.com/image-seo-how-to-name-files/

Add alt-text

When images are uploaded, it is ideal to enter alt-text (or alternative text). This text is displayed when images aren’t available or read out via a screen reader for people who are visually impaired. It also allows search engines like Google to better crawl and rank your website.

Read more: https://moz.com/learn/seo/alt-text

Ideal image in file size

Keeping your image sizes as small as possible is important as it will make your website faster for your customers, especially in countries like Australia with generally poor internet speeds. A 22Mb image file size will add nothing to your website and only drive people away.

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-centric (for example a product website that relies on images to sell your stock), then you might consider image sizes up to 300kb.

Keep in mind that many people are looking at your site on their mobile device and will usually have limited data available. You don’t want them to use all their data after browsing your website.

Be mindful of page size

Keep in mind page size. If you have 20 images on a page that are 300kb each in size, 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 – they’ll be on to the next website. This is not a rule, but something to consider. What is an ideal website page size? Perhaps around 2MB. For more information, see: https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/

Ideal image in pixels

Images should ideally not be any bigger than 1920px wide. 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 and you’ll find the trade off in pixel image size vs image file size is most often not worth going above this.

Image type

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 – or if your image uses a limited colour pallette, for example a two colour logo.

JPEG image quality of 50-60 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

There are many image resizing tools available depending on your budget, skill level and requirements. Some are listed below.

Online image resizers

KRAKEN: https://kraken.io/web-interface (this will resize your images and compress them)
TINY PNG: https://tinyjpg.com/(This will compress your images, not resize them)

Paid

PHOTOSHOP: https://www.adobe.com/au/creativecloud/plans.html

Free offline image resizer program

GIMP: https://www.gimp.org/downloads/

NOTE: It is important to remember that a website is not a file server. It is not intended to be used as a storage device and it does not have endless storage capacity. Most hosting plans will have a limit on your storage – and very fast hosting often have a very limited amount due to the cost of high quality infrastructure.

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 increase your site’s performance without paying additional for more resources.

Summary:

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 50-60%
  • 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