With Images, Size Does Matter!
With all this discussion about lowering loading times and optimizing your site you’ll notice that we keep mentioning image optimization and how important it is. So what do you need to consider with optimizing your images? We’ll have a look at image formats firstly and then discuss optimizing software and sites.
Format – GIF, PNG and JPEG
The three most common and universally supported image file types are GIF, PNG and JPEG. If you need animation the GIF is the format of choice with its limited colour palette, while PNG is great for preserving details at high resolutions as it does not apply lossy compression other than the limiting of the colour palette which is user selectable. JPEG utilises a mix of lossy and lossless to allow for extremely customisable levels of compression meaning you need to experiment to find the best balance for your images. JPEG is preferred for large photos or screenshots.
Software and Online Tools
Photoshop and other popular editing software packages offer a ‘Save for Web’ or similar option which allows for customisation of compression techniques applied to images. If you’re a windows user then RIOT is an extremely popular free application for optimizing your images. It is also available as a plugin for applications like GIMP.
Your images should only be at the resolution used for display, serving images that are resized at a smaller resolution via the browser is simply wasted data and time. Check your natural vs display sizes using a tool like Chromes DevTools to see if any of your images are being resized.
Removing unnecessary metadata such as geo location and time/date info is another way to lower your image sizes. Lots of the tools mentioned above will do this for you.
What are you waiting for? Optimize your images site today!