The Goldilocks problem.
At Tartan, we spend a lot of time thinking about how to balance image quality against page-load time. If a website serves an image to a user that is unnecessarily large, page speeds suffers and conversion rates will drop. However, if the image quality is reduced too much, customers may lack the detail they need to decide they like your product. It’s a tricky problem.
Thankfully, with some thoughtful design choices and a little effort, it’s possible to serve high-quality images and maintain fast page load times. This blog sets out how we tackle this Goldilocks problem for our clients.
Tackling the Goldilocks problem
1. Decide whether an image is necessary.
The fastest image is the one you don’t serve. Before beginning any image optimisation we pause to consider whether serving a particular image is necessary. Often images are included without much thought being given to their purpose or their potential impact on mobile experience or users with accessibility needs.
Images sometimes duplicate information already contained in the text. Research suggests this can actually hinder, rather than aid, understanding. We think there is much to be learned from the approach of services such as gov.uk that completely eschew the use of images.
2. Choose the right size of image for the context.
If an image is only going to appear in a thumbnail then it should be resized to reduce its file size. This is one of the simplest changes you can make to drastically improve the speed of a site.
3. Compress the image.
Once you have the right size image for each context, you will want to compress them. There are a number of tools which can losslessly compress common image formats. Our favourite is an open-source tool called ImageOptim.
4. Consider screen size and network connection.
With CSS media queries, it is possible to serve different image sizes to different devices. Devices with smaller screen sizes or mobile connections should be served smaller images. Desktop users with landline connections can safely be served higher quality, higher-bandwidth, images without adversely affecting site performance.
5. Lazy-load images where possible.
Don’t load images that a user never sees. lazy -loading is the practice of only making HTTPs requests for images when they appear in the viewport. The principal is that if it’s not on the user’s screen, it shouldn’t be loaded. This practice is especially useful for directory sites that can have tens, or even hundreds, of images on each page.
6. Serve images via a Content Delivery Network (CDN).
Image assets should be served from third-party content delivery networks where possible. This relieves the burden on your own server and ensures that images will load quickly. CDN’s work by placing a cache of your image in data centres at strategic points around the world. They then try to serve the image to your user from their nearest data centre. This can significantly reduce the time it takes for an image to load. Especially if your users are located in more than one country
Final Considerations.
It’s worth remembering that internet bandwidth uses electricity and costs money. So shaving unnecessary bytes from your images can help save money and help save the planet too. If your site is serving thousands or even tens of thousands of users a day then this can add up to a big difference.