Back when we looked at the effects services like Opera Turbo or even RabbIT could have in compressing web content on-the-fly I used the blog site Lifehacker as an example of a site that perhaps didn’t pay too much attention to the file size of imagery they use on their site, so in this small piece I’m going to debunk the notion that unoptimised and inefficiently stored image content isn’t rife in every corner of our web.

You see, the premise is simple. When one compresses a bit-perfect original master of their favourite song down into mp3, they are using a lossy format and of course reaping the benefits of this. The user can then walk around with a ~5MB copy of their favourite song that’s indistinguishable against the original recording to all but the most ardent audiophile. Conversely they can choose a lossless codec that reproduces the original without any degradation whatsoever albeit at the cost of a >40MB file size. Well, the same is true with images. And where do we use images on our computer where file size may become a huge problem? That’s right – the Internet. Just as audio compression is a complex mathematical field, the same is true with its visual counterpart. We’re not going to attempt to delve into the science behind that because it’s not my field and I’m sure you can find umpteen sources to explain it better than I. However, what we will do is list a couple of further examples other than Lifehacker and offer up the original imagery for you to make up your mind.

First up – The official website of Leeds Metropolitan University. I happened to be browsing at postgraduate courses and noticed the lead image taking a second or so to load which (as pedantic as it sounds) is noticeable to a frequent web surfer.

Image saved directly off the site (please click for original full resolution copy – caption is not indicative of the statement I am making)

Clearly a pretty hefty 940px x 233px image weighing in at a grand total of 204.97 kB. Surely we can get that down without sacrificing much quality? Well, I fired up Irfanview, and in particular the Radical Image Optimisation Tool (RIOT) plugin then used the save for web option to produce a lossy JPG set to a quality level of 75%. You may find it easier to just use RIOT standalone but I like having Irfanview to do basic image editing if I need to change one or two things at this point. The settings you use here will vary wildly from image to image, and there are formats which specifically work better for less complex or images constructed in a certain way. For example, if my picture was a block of two colours arranged in a pattern I might choose to use PNG to get a more efficient end product. Again, delving into the logic here gets complex, but I would really encourage anyone in web design to read up. Some of the best articles can be found in the Yahoo developers section.

Using RIOT through Irfanview

Great stuff. Apparently without altering the dimensions of the image RIOT has managed to crush the file size down 174.3 kB to 30.67 kB – a brilliant effort and one which represents an 85% saving.

I then upload the image to this site through our WordPress frontend, at which point another piece of magic happens. You see, we run a small plugin called smush.it, designed by Stoyan Stefanov and Nicole Sullivan. Smush.it is a lossless image compression utility which will further strip the file size using techniques not designed to ever degrade quality (i.e. removing supplementary metadata). Because we’ve already optimised the image, smush.it has no success on this occasion, although it does achieve a respectable 5.66% reduction of the original image. I should point out at this point that the original image you see above was uploaded via a different method and has not been touched by the ’smusher’.

Checking what smush.it can do for us

Well, the proof is in the pudding, so please feel free to sample the difference. Again, please click the thumbnail to open up the full size version.

The Image after both RIOT & Smush.it

Probably the best way to compare the two is to right click the full size copy of each and save to your desktop. Then use your favourite image browsing tool (you should have a basic one in your OS) to flick rapidly back and forth between the two. I have to say I notice a very minor change in small sections of the skin tone, but really nothing whatsoever that would stop me using it on a site. In fact, If I used an image like that on this site in context I would probably push it down to perhaps the 50% quality zone, at which point the image becomes only 21.14 kB.

So what can you do? Well, it depends at what end of the spectrum you reside. If you’re a web designer you SHOULD know this stuff already. If not, learn… fast (for all our sakes). If you’re an end user you need to establish why you want to do something about it. At the end of the day, if you are connected to the world through an un-metered 10MB pipe there’s little drive to do anything about this minor travesty. Leave that to the people around you responsible for the content – you’re the market that has caused this slack practice but that’s not to say it’s your fault. However, perhaps you’re heavily metered (a ‘generous’ 1GB plan), use pay as you go, or simply have a slow link. Just because you’re not willing to operate your own gateway using RabbIT doesn’t mean you can’t slim down the footprint your web surfing has. It was pointed out to me that at least T-Mobile & Vodafone in this country operate server side software in a similar vein to RabbIT (see below) so you can perhaps leverage the client side configuration to encourage the proxy to be more vigorous with its compression tendencies. If this isn’t an option then by all means look into Opera Turbo.

A quick note to those of you covered by a wonderful HSDPA blanket and wanting to disable the in-line image compression on your links. You can either locate your operators software like T-Mobile’’s Web n Walk accelerator frontend or send explicit instructions to the proxy by modifying your HTTP headers.

On a more serious note – I presume Leeds Met have no problem with me using this imagery. With it being in the public domain I would expect there to be no backlash! Equally, I hope I’ve made it abundantly clear that this isn’t an attack on my university in any way, I simply happened to stumble across a good example to illustrate my point. To further underline this I hopped over to the Loughborough University site and managed to get one of their 70.63 kB images down to 19.72 kB using the simple RIOT lossy JPG compressions procedure outlined above

Update: I’ve just noticed that LMU have in fact resampled most of their imagery to between 50-140kB, which is much more reasonable. In fact, the image I dissected above in particular is now only 50.56 kB.