Webpages are getting larger and larger or heavier and heavier, a lot of this has to do with images. Websites are full of images with some estimates putting the image content at over 65% of the average page. If they are not formatted correctly for the web then they are going to have a huge impact on your site. You want beautiful imagery on your site, especially if your in a creative industry or designing for a creative client so you need to know how to optimise your images.
Image basics
There are a couple of basic things you need to know:
Choose your format – for photos and images use JPG, great for complex images that are full of colour; use PNG for graphics and all other images.
Size your images – if you know that the image needs to be 308 x 76 pixels size the image before you upload it, if you need the same image in different places at different sizes then create a separate image for each place. Resizing an image on the fly will make your site slower.
So what is compression?
Image compression works in the same way as any other form of compression – it removes the redundant data contained in a file to make it as small as possible. Image compression takes 2 main forms Lossless and Lossy.
Lossless Compression is best for image quality but does not reduce the file size by much.
Lossy Compression is best for reducing the size of the image but can sometimes affect the quality.
How to compress images?
There are loads of plugins out there to compress images in WordPress – our preferred plugin is part of a service called Imagify. So how does Imagify work – you sign up for an account at https://imagify.io, install and activate the plugin. You then need to configure the plugin.
There are 3 levels of optimisation that you can choose from, Normal, Aggressive and Ultra.
Normal Compression
Normal compression uses Lossless to optimise the images, this is great for photographs and does not reduce the quality of the image unfortunately does not do a lot for the image size.
Agressive Compression
Agressive compression uses Lossy to optimise the images but tries to retain as much of the quality as possible and reduces the size of the file.
Ultra Compression
Uses Lossy to optimise the images to the maximum great for file size but can have an effect on image quality.
Below is an example of the same image with different levels of optimisation – can you tell the difference?
The images above are in the following order:
- No Compression
- Normal Compression
- Ultra Compression
- Agressive
There is not a huge amount of difference between the quality of the images, however the size of the file makes a huge difference to the time it takes to load the page:
- No Compression – 4MB
- Normal Compression – 518KB
- Ultra Compression – 406KB
- Agressive Compression – 440KB
So even with Normal compression you can reduce the amount of time it takes for the page to show by a huge amount. The Imagify plugin lets you change the compression from within Media Library within WordPress even allowing you to remove compression completely.
Want to know more – head over to https://imagify.io and sign up for a free account today.
Remember with RocketWP Imagify is installed and configured by us and all your images are optimised.
