How to optimise images for your website
Have you heard about image optimisation, but you don't know how to do it or what image optimisation does for your website? If so, you are in for a treat! Below, I will take you through everything you need to know to optimise the images on your website, boosting performance instantly!
What is image optimisation?
Image optimisation is the process of reducing the file size of your images with minimal visual quality loss.
While there are many tools to optimise images (see below), each image and format is different and, therefore, there is no one-size-fits-all approach to image optimisation.
Why should you optimise your images?
For many websites, images are used to enhance the user experience, and enable website visitors to quickly understand the context of a page. However, images on the web can also, if not properly optimised, significantly slow the loading of a page.
First impressions count: Evidence suggests that, on average, it takes internet users only 3 seconds to decide whether to leave a page. If your pages take over 3 seconds to load, expect a significant loss of traffic!
Optimising raster images (jpg, png, gif...)
Raster (or bitmap) images are composed of pixels. When a photograph is taken, these pixel-based images are likely very large in both file size and dimensions.
There are a number of techniques used by image optimisation software to reduce the file size of the image such as limiting the number of colours or removing EXIF data (image data, such as camera model, location of the shot and whether the flash fired etc.).
Often a raster image can be reduced in file size by 60-90% without noticeable visual quality loss.
Tools for optimising raster images
[WordPress] Plugins (not recommended)
While plugins can help you to automate processes on your website, we don't recommend optimising images using plugins. These image optimisation plugins often require, for good compression, that you upgrade to the pro version of the plugin and they don't offer much user control.
Here are some of the most popular image optimisation plugins for WordPress:
- Smush Image Compression and Optimization — Freemium
- ShortPixel Image Optimizer — Freemium
- reSmush.it Image Optimizer — Free and open source
- Zara 4 Image Compression — Freemium (registration needed)
- JPG, PNG Compression and Optimization — Free and open source
Desktop software (recommended)
There are a number of tools available for the desktop. These are some of the most popular:
- Caesium (Windows) — Free and open source
- ImageOptim (Mac) — Free
- FileOptimizer (Windows) — Free
Photo editing tools
When exporting images, both of these tools (below) offer the option to reduce image quality without damaging the original file. If you frequently edit images for the web, exporting in this way is a good habit to have.
- Adobe Photoshop (Windows, Mac) — Not free
- GIMP (Windows, Mac, Linux) — Free and open source
Not a bad option if you are in a fix and need to optimise an image quickly, but online image optimisation is not useful as part of an efficient workflow.
Command line tools (advanced, but offers greater control)
- ImageMagick (Windows, Mac, Linux) — Free and open source
Optimising vector graphics (SVG, EPS...)
Unlike raster images, vector graphics are composed of mathematical co-ordinates. These graphics can be resized without distortion or pixelation.
Optimisation of vector graphics is very different to that of raster/bitmap images as the largest reduction is often achieved through simplification through reduction of nodes.
Also, vector graphics software often include, in the file, additional code relating to the software itself (effects, layer data etc.).
Tools for optimising vector graphics
- SVGOMG (recommended) — Free
Vector Graphics Editors
- Inkscape (Windows, Mac, Linux) — Free & Open Source
- Adobe Illustrator (Windows, Mac)
To optimise a vector graphic with Inkscape, use the "edit paths by nodes" tool to select a shape and press
cmd+l on the Mac) to reduce the number of nodes.
Once the nodes have been reduced, click "File" > "Save as" and select "Optimised SVG". When closing Inkscape, do not save the document or you will save over your optimised version.
Command line vector optimisation (not recommended for beginners)
- SVGO (Windows, Mac, Linux) — Free
Other vector optimisation tools
- Any text editor (advanced, but offers greater control)
The benefits of image compression and optimisation are significant. For beginners, new to optimising JPGs and PNGs images, I would strongly recommend desktop tools such as Caesium (Windows) and ImageOptim (Mac) which can optimise your images in batches. For those with a more technical background, you may find that the command line (ImageMagick — Win, Mac, Linux) provides more granular control.
For vector graphic (SVG) optimisation, Inkscape or illustrator can export your images without the extra "fluff" and you can take this further using SVGOMG. Again, for the advanced user, you may choose to do this manually with a text editor.
Did you find this post on image optimisation useful. If you did, feel free to bookmark it and share it with someone who you think may benefit.