Speed up your website by blurring images

This trick will give you a faster site. But be warned, it isn't always appropriate, says Jamie Mason.

Blurred areas lend themselves well to how JPEGs compress images, and increasing these blurred areas will help slim images and achieve higher rates of image compression.

This can be done using tools such as JPEGmini and ImageOptim. This optimisation is normally applied in subtle peripheral areas but can be used for larger areas when it is editorially appropriate (i.e. when doing so won't change the context in which you want to present the main subject).

Consider some different possible contexts for the stock photo shown above, where we see a group of people stood behind a man reaching out to greet us.

  • If the image is to promote the man at the front who is a politician, then blurring the features and identities of the other people won't dilute that message. It could even help emphasise the message by putting focus on him and affirming that the image is about the individual and not the group.
  • Conversely, if the image is to be used to represent the staff at the local branch of your bank, and welcome new customers, this approach wouldn’t be appropriate. It would be harmful to the bank employees' efforts to build a personal relationship with you if you couldn't recognise their inpidual faces.

These are both extremes, but hopefully serve to demonstrate the technique, its effect, and the kind of trade-offs you have to consider when deciding whether to apply it.

In most cases you should be able to use your judgement to identify inconspicuous areas to help boost compression in some small way.

Words: Jamie Mason

Jamie is a front-end developer specialising in JavaScript. This article was originally published in net magazine.

Like this? Read these...