thinking, drinking and websites from Ross Bruniges

Images – why the right format matters

by Ross Bruniges on February 10, 2013

Old content alert!

Thanks very much for visiting my blog. Always happy to have people read my stuff but just thought I should point out this post is years old. If it's about technical stuff there is a possibility that it is no longer relevant, if it's a bug report/fix I'm hoping that it should now have been fixed.

Of course if this is what you're looking for and it does work then great, just don't say I didn't warn you...

Websites in the past few years have started to suffer from bloatedness and over-indulgance. People have predicted that an average site may hit 2mb by the end of 2013 which is fairly hefty, especially for people on a slow network or those with a fixed amount of data they can use each month. There are lots of code refactoring processes that can be done to improve things but you don’t need to be a coder to make your site faster – just use the correct image for the subject matter it contains and you can make some amazing size savings.

The three image formats I’m going to cover are .gifs, .pngs and .jpegs – they all have a subject matter that suits them best. Using the correct one can save you a ton in page weight.

jpegs

Simply put – if you’re uploading a photo always use a jpeg.

JPEG stands for “Joint Photographic Experts Group” and is named after the committee that created the standard – pretty much meaning that it’s specifically MADE for photos and made by the EXPERTS in this field – listen to them!

A jpeg of some delicious food – 45kb

If you’re creating a new file make sure to play around with the quality setting – if you start off with a high-res image you can reduce the quality (and filesize) with in many cases no obvious visual loss. Be aware that each time you re-save a jpeg it will automatically loose some visual quality so always try and work on hi-res or original files.

pngs

Use a PNG for graphics, logos and anything requiring a transparent background.

PNG stands for “Portable Network Graphic” and like jpegs the hint is in the name, GRAPHICS. Image software tools provide a number of settings on transparency type, matting and colour dpeth that can squeeze out as many bytes as possible and still provide a crisp image with a smooth edge.

The same delicious food but now a png; and 445kb (10 times bigger)

They come in two flavours – 24 and 8 bit. If IE6 support is still important you need to use 8-bit, if not 24 bit will give a slightly larger filesize but a much better quality image.

gifs

It used to be that gifs were the image format of choice for transparency but with the introduction of PNGs the one main use for gifs online are to spread animated fun and laughter through sites like – memebase.cheezburger.com/senorgif and giphy.com/.

If you have a flat graphical logo and you really want to squeeze every last byte out of your page weight a gif might just do the job.

other image formats

There are other image formats, here are my feelings on using them on the web.

bitmaps or tiffs

Please do not use them in your websites.

webp

Something to look out for. This is a new image format and one that is said to provide images a good percentage smaller than both jpeg and png. The problem right now is lack of good out the box browser support but it’s worth having a look out for updates on developers.google.com/speed/webp/.

Bruce Lawson has provided a nice post around the benefits of webP, and also the downsides in implementing it right now if easy cross-browser support is required, have a read over on his blog – save-bandwidth-webp-with-fallback

And finally

Once you’ve got the right format in place you can save even more bytes through running your images through an image optimisation tool. The best one I’m aware of is imageOptim, it’s free and can always seem to squeeze some file size out of somewhere.

I hope this little article helps you with your 2013 webpage diet, I think we could all do with shedding some bytes somewhere!

In my experience, all but the simplest of graphics are smaller as an 8-bit PNG than as a GIF, and in the few cases that GIFs are smaller it’s only by hundreds of bytes – i.e. not worth bothering about.

By converting PNGs and JPEGs to WebP, the Chrome Web Store was able to reduce image sizes by about 30% on average (here’s one sample image in WebP at 8.3kB and JPEG at 32kB). Given the number of requests Chrome Web Store serves, this adds up to several terabytes of savings every day.For users, the rubber meets the road when it comes to how fast the page loads though. On this score, with WebP we were able to reduce average home page load time by nearly one-third — a huge benefit for our users.To implement WebP, the team first added transcoding support to the image request pipeline; then at runtime the site checks whether the client browser supports WebP and requests the WebP version for each image when it does. The effort to implement it turned out to be not much work for a lot of benefit.

rossbruniges

Yeah – it’s certainly got potential but unless you’re making stuff specifically for iPhones you can’t guarantee that your users browsers are going to support it.

cesar

Wrong. You can easily detect if browser support webp and send correct image to browser. Apache pagespeed module make this. Also several sites are making this. The result less bandwith

rossbruniges

I’ve updated the article to say ‘out of the box’ support. pagespeed is a cool module but turning it on, on even knowing how to turn it on I would class as a pretty advanced thing for people posting content to hosted blogs.

cesar

You can make this only with a litle javascript that adjust css to load webp or png/jpg according browser support.