Images – why the right format matters

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!