Bitmap Image Optimisation

Warning This article was written over six months ago, and may contain outdated information.

Har­ry Roberts wrote a great arti­cle, Front-end per­for­mance for web design­ers and front-end devel­op­ers, which details var­i­ous tech­niques for improv­ing page load times. One thing he skips over, though, is image opti­mi­sa­tion. There are many ways to opti­mise images for load­ing per­for­mance, includ­ing using image sprites, icon fonts, and replac­ing bitmaps with SVGs. But when­ev­er you have to use bitmap images you should also opti­mise them before they make it to the page.

In this arti­cle I want to show a few sim­ple image opti­mi­sa­tion tech­niques I use, which are aimed at reduc­ing the file­size of the images, and there­fore speed­ing up your page load­ing times.

A for­mer col­league taught me a lit­tle trick when sav­ing JPEGs: you can often get away with reduc­ing the qual­i­ty of the image quite sig­nif­i­cant­ly with­out any notice­able drop in visu­al fideli­ty. And the low­er the qual­i­ty of the image, the small­er the file size. If you use Pho­to­shop you can in many cas­es reduce the Qual­i­ty set­ting to as lit­tle as 51% (this seems to be some kind of inter­nal bound­ary). In the image below the pho­to on the right has Qual­i­ty set to 51; I don’t know about you, but I can’t tell the difference.

Image optimisation: comparing different quality levels

You can’t do this as a blan­ket rule, how­ev­er; it real­ly depends on the image you’re work­ing with. Large blocks of sol­id colour can be affect­ed by com­pres­sion arti­facts, as you can see in the image below, most notice­ably where the land meets the sky (click to open it at full size). So care­ful­ly check your images and adjust the qual­i­ty as required.

Image optimisation: showing compression artifacts

If you’re con­sid­er­ing HiD­PI screens such as Apple’s Reti­na, you can drop the qual­i­ty even low­er; as the dou­ble-sized image will be resized to half of its size in the page, you can drop the Qual­i­ty down to even the mid-30s, in some cas­es, with­out any dis­cernible drop in qual­i­ty. This leads to the incred­i­ble case of larg­er images with low­er file sizes. You can read more about this in the post Reti­na rev­o­lu­tion by Daan Jobsis.

The oth­er thing you *must* do is run your images through an opti­mi­sa­tion pro­gram. On the desk­top the best I’ve ever found is Kor­nel Lesiński’s Ima­geOp­tim, a tremen­dous piece of free­ware which runs a series of opti­mi­sa­tions on images that you drag and drop onto it. This can lead to file size reduc­tions of around 25% in many cas­es, and even up to 75% or 95% for small­er images. A Ruby script called image_optim will let you run this on the serv­er rather than client side. 

2 comments on
“Bitmap Image Optimisation”

  1. […] Bitmap Image Opti­mi­sa­tion (22 de enero, 2013) […]

  2. A good alter­na­tive to Ima­geOp­tim for Lin­ux is Trim­age:
    I’ve found it deliv­ers sim­i­lar results.