Images – why the right format matters
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.
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!
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.
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.
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.
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.
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
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!Tweet