2 Simple steps to optimise your website images
This post includes affiliate links. This means I recommend products that I have used and I get a commission if you buy through one link on my website (at no additional cost to you). I only recommend products I've used and I've found useful.
Images are usually a vital part of a blog. Whether you use your images or use stock photos, the format and size of your images are going to have a significant impact on your website performance and your user experience. Optimising your website’s images is something that you can quickly improve with a couple of free apps.
Why optimise your website images?
Optimising your images will improve your website speed, which has a significant impact on your website’s SEO ranking and user experience:
1 – SEO ranking: Website speed is one of the factors used by search engines in their ranking algorithm, so improving your speed will improve your SEO ranking.
2 – User experience: Website speed impacts bounce and conversion rates. According to Google, the probability of users bouncing off your website increases by 90% when your website load time increases from 1s to 5s.
So website load time is a key element to consider both to improve SEO and user experience.
How to optimise your images
When you take a pic or download an image from a stock photo site, those pics are likely to be 3-15M, which is a lot of data to transfer when your website is loading, especially if you have several images per page. So you need to optimise your images to bring their size down while maintaining image quality. There are a few things you can do:
1 – Re-size your images (don’t scale them!)
If your images are too big for where they need to go on your website, their size is going to be bigger than needed, and as a result, this is going to delay the load of the page and make the user experience worse. Take into account that scaling your images does not change their actual physical size on disk, so even if you scale them to a smaller size, download times are going to remain the same.
Make sure your images are the right size for their purpose. Think about where each picture is going on your website and re-size it accordingly. For example, if you are going to use a picture in your main page to be displayed full width, you need to make sure it is at least 1024pixels width (see w3schools resolution statistics). You can use smaller sizes for different areas of your website. If you are not sure what image size to use, try a few different sizes until you find the right size for the main locations where you use images.
To re-size your images, you can use any image manipulation software. If you have a Mac and you only want to re-size the picture, you can open it with Preview and go to Tools > Adjust size. You can enter here the desired width and/or height. By default, the aspect ratio is locked so that you can only change either width or height. This ensures that the image is not distorted when you re-size it.
2 – Compress your images
You can use image optimisation software or install a WordPress Plugin to compress your images and reduce their size. If you install a good WP plugin for image compression, you can avoid an additional step when you prepare your images, as the WP plugin can automatically optimise any photos uploaded to your site. However, using an app on your computer may give you better control over how you are compressing your images. I’ve found that using a WP plugin provides excellent results and minimises my workload, so at the moment I’m using the WP plugin Shortpixel.
There are a lot of WP Plugins for image optimisation. Shortpixel is one of the WP Plugins that has excellent reviews. The free version allows you to optimise up to 100 images per month, although you do need to register to get the free API key.
To install Shortpixel (WP plugin):
1 – Go to Plugins > Add New in your WP Dashboard.
2 – Search for “Shortpixel”.
3 – Install and activate the plugin.
5 – Go to your WP Dashboard > Settings > ShortPixel.
6 – Check the ShortPixel settings (WP Dashboard > Settings > ShortPixel). I use the default settings and have added my Cloudflare details on the “Cloudflare API” tag.
To use an image optimisation app on your computer
If you want to perform the optimisation yourself and not automate it through a WP plugin, you can use ImageOptim, which is a free drag and drop app for Mac that is really easy to use. If you are using Windows, you can find some recommendations for alternative tools on the ImageOptim website.
To install ImageOptim on your Mac:
1 – Follow the link ImageOptim and click on “Download for free”.
2 – Double click on the file downloaded: ImageOptim*.tbz in your Downloads folder. This will extract the application file “ImageOptim.app” into the Downloads folder.
3 – Move the file “ImageOptim.app” to the Applications folder.
4 – Double click on the ImageOptim icon or look for it on Spotlight to launch the app. Now you can start using it dragging and dropping any images that you want to optimise. The app overwrites the original image when it optimises it, so save a copy first!
Following these steps and making sure that you re-size your images and optimise them can reduce your image size significantly. As an example, the stock images I usually download have a size of at least 4M (4200W x 2800H). Once I re-size them to 1024W, they typically go down to around 0.5M. After optimisation, the final size is around 0.05M, which is a decrease of 98%!
If you want to continue improving your website load speed, check this blog post for step-by-step instructions.