Size Matters! Image Optimization Explained

imageoptimize

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

featured-image

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.

compressor.io

Some popular online image optimizers include Compressor.io and SmushIt who offer simple interfaces and less customization options than their software counterparts.

hammy

If you are using WordPress then there are some popular plugins you should look into including EWWW Image OptimizerCW Image Optimizer, Imsanity and Hammy.

Other Considerations

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!

Share this postShare on Facebook2Tweet about this on TwitterShare on Google+1Share on LinkedIn5