How We Approach Image Optimisation For Web
Matt Bailey / +Matt / January 12, 2015

UPDATE 07.07.2015: We no longer recommend using the Compressive Images technique. Any wins with file size are outweighed by the extra processing power required by browsers when scalling double-size images. This is particularly an issue on lower powered mobile devices. Instead we simply recommend generating images that are context and device size appropriate. We use the picture element and srcset to serve up different size images based on media queries.

Image optimisation is one of the most important, but often most overlooked performance considerations for websites, particularly with the prevalence of lower bandwidth devices today. You can concatenate and compress your CSS and Javascript as much as you like, but if your page is full of huge images you might as well have not bothered.

There’s a lot we as developers can do with images that are part of our frontend workflow or directly referenced in our code and templates (automatically resizing, cropping etc.), but one of the biggest challenges we face, and have little control over, are images uploaded by site editors and other users.

Below is a summary of techniques we share with our clients on good image optimisation practice.

Compressive Images Technique

We recommend a technique called Compressive Images. This allows us to cater for Hi-Def/Retina devices, whilst still serving as small file sizes as possible.

The principal behind it is that you make your master image double (or more) the visible size, and then highly compress it. This results in an image that looks sharp on all devices, but often has a smaller file size than an image the same size as the visible size. For more details have a read of this article by Filament Group.

By way of illustration, consider these two pictures of a cute kitten.

Image 1 (standard method)

  • Pixel dimensions: 960px x 540px
  • JPEG quality: 80%
  • File size: 165KB

Image 2 (Compressive Images technique)

  • Pixel dimensions: 1920px x 1080px
  • JPEG quality: 10%
  • File size: 87KB

When both images are viewed at the same size, in this case, 620px wide there is little discernible difference in quality, and yet the second, much larger image is almost half the file size of the smaller image.

Image Optimisation

Save For Web

We recommended using software such as Adobe Photoshop, which does a good job of optimising images for the web.

  • In Photoshop go to File > Save For Web
  • Select the Optimized preview tab and zoom level (bottom left of window)
  • In Preset select JPEG Low
  • Raise the Quality to set the desired level, keeping an eye on the output file size in the bottom left of the window (the lower the quality the smaller the file size)
  • Also, make sure Convert to sRGB is unchecked and Metadata is set to None

REMEMBER, when using the Compressive Images technique the pixel dimensions will be double the size they will be viewed at on the site, so the image can be compressed a lot (hence starting from the JPEG Low setting).

Further Optimisation

Once you have saved the image in Photoshop we also recommend using software such as ImageOptim (free Mac OS X app) or Kraken (free online tool) to compress the file further. These tools work by tweaking the compression parameters of the image and removing any unnecessary embedded comments, colour profiles and metadata.

For a more comprehensive list of tools, including workflow automation and server side, Addy Osmani has written a good roundup.

A Note On (File) Size

I can’t illustrate what a ‘large’ file size looks like, so here’s a fat cat instead.

It is hugely important that image file sizes are as small as possible in order to help speed up page load times. Particularly where conversions are concerned, research has shown that you can achieve:

  • +3% conversions for every second reduced from 15 seconds to 7 seconds
  • +2% conversions for every second reduced from seconds 7 to 5
  • +1% conversions for every second reduced from seconds 4 to 2

Source: How to Improve Your Conversion Rates with a Faster Website