Skip to main content

Speed up your website by blurring images

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 (opens in new tab).

This can be done using tools such as JPEGmini (opens in new tab) and ImageOptim (opens in new tab). 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 (opens in new tab)

Jamie is a front-end developer specialising in JavaScript. This article was originally published in net magazine (opens in new tab).

Like this? Read these...

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.