Website page load speed: Optimising images

In today’s age of superfast broadband it’s easy to forget about page load times, but with more information being requested and people expecting results instantly it’s still very much a consideration. And with mobile web an accepted method of everyday browsing website delivery speeds are almost as important now as they were back in the days of 28kbps dial-up modems.

The images on a site play a very big part of download speed, but they also usually play a huge part in the overall design and identity of a website. So there’s a very fine balance to be maintained between designing with big, clear and quality imagery that is quick to be delivered to the website visitor.

You can test the load speed of your website here: https://developers.google.com/speed/pagespeed/insights/

The report will no doubt suggest you should ‘Fix’ your images by compressing them to save many bytes of data. But please take the results in the Google page speed report with a pinch of salt. Whist there are usually considerable savings to be made on your images, the percentages that Google tend to suggest are unrealistic.

Google has tried (without success so far) to promote its own image compression format, under the name of WebP, which is supposed to provide better compression ratio. This format is not yet widely recognised but I would imagine this scaremongering is with a view to increase the awareness of this format. Currently WebP image format is only supported in Chrome and Opera Browsers. It is not recognised in IE, Firefox or Safari.

So what can you do?

There are savings to be made, they can be simply done by changing a few setting when saving out the image, there are also online tools that boast great file size savings, but they are limited and will be at the cost of the quality of the image.

Taking this banner image as an example, it’s currently a tad under 300kb.  

image not optimised

By opening it Adobe Fireworks and exporting is as a PNG8 with fewer colours the image has now been reduced to 68kb with very little effect on quality. 

Adobe Fireworks PNG8 image 

Beyond that, image optimisation is a bit of a black art and there is no simple fixed solution. To successfully optimise images they need to be addressed on an image by image basis, increasing the optimisation of each image until the ideal compromise of reduced file size and retained quality is reached.

The more complex an image, the larger the file size will be as the computer struggles to compress the many colours and sharp contrast changes.

The various file formats compress data in different ways therefore a simple rule is JPG for Photos and PNG for graphical content and/or text. GIF is still relevant in some instances but I tend to prefer PNG and it often gives the best compression. 

When images are very busy with a combination of photos, text and graphics, they are the worst nightmare of anyone aiming to reduce the file size, compressing the photos will make the text render blurry, and optimising for the text will pixilate the photography. There are tricks that can be applied, by blurring the photography, limiting the colours etc. but these are things that need to be built into the design, and so the images ideally need to be created with this in mind in the first place.

As demonstrated here:
This one is 56kb  

image with no optimisation

It was able to be compressed to only 16kb using the same method above, but in this instance you can see the loss of quality. 

optimised image with loss of quality 

If the design didn’t have the graduated background this would be less obvious. With a flat colour background, a clean cut-out of the child without the ‘halo’, no effect on the text and a simple button this could most likely come in at under 10kb.
The other consideration is what software is used to export the image. Most commonly your designer will have exported the images via Photoshop using the “save for web” setting. As shown above Adobe Fireworks is much better at image optimisation, and it is compatible with Photoshop so PSDs can usually be opened directly into it if Photoshop is the preferred method of working. 

If you think you need help reducing the file size of any of your images or if we can help by creating optimised graphics for you then please get in touch.

Contact Get in touch