How to improve your website page speed by optimising your images
There are many factors influencing your search engine rankings on Google. One of the key ones is fast page load times.
A slow website increases visitor frustration.
It makes them less likely to take action and more likely to search elsewhere. 40% of visitors will abandon a page if it takes more than 3 seconds to load.
One of the quickest and easiest ways to improve page load times is by optimising you images.
Here are some tips:
Choosing the right image format
A brief explanation of the different image formats and what they can be best used for:
png: Use PNG images if the image has text in it, or if you need a transparent background.
gif: Use GIF for very small images such as a background tile, or animated images.
jpg: Use JPG or JPEG images for displaying photos, illustration images, etc.
svg: for icons. They are vector graphics and can be scaled without losing quality. These are ideal for high resolution screens.
Exporting for web
There are a number of software products which have exporting for web capabilities. You will have heard of Photoshop. However, it can be expensive and has lots and lots of features that you may never use. My preference is for simpler software.
For this reason, I recommend Pixelmator Pro. Their new export for web option makes it easy to resize and crop your images. This will strip out any unnecessary data and optimise the reduction in file size without losing image quality (more advice on sizes are below).
If you are looking for a free alternative which will optimise your images only, then I would suggest ImageOptim.
Relatively new on the block is Affinity Photo. I haven’t tried it yet (although I have just started experimenting with Affinity Publisher which looks like a very capable page layout software).
This is a bit of a balancing act and will depend on each individual image, but as a guide:
According to stats 1280px wide will cover 93% of uses. I suggest a minimum width of 1500px and maximum of 2500px for header and gallery images. Half that for caption images.
Aim for up to 250kb for header images and 100kb for smaller images.
72dpi is fine for monitors (dpi stands dots per inch. To compare, print files often require 300 dots per inch).
To check you haven't over-optimised your images, look at large areas that have the same colour (e.g the sky), and see if there is any pixellation or fuzziness.
I hope the above tips help. If it’s all a bit double-dutch, then please do get in touch. We’d be happy to help!