A step-by-step guide to optimising images for the web
Optimising images for the web is essential for maintaining a fast and efficient web page. Poorly optimised images slow your site down and create a poor user experience. They also consume more energy to store and load, which negatively impacts our environmental footprint. This step-by-step guide will walk you through compressing your images effectively; ensuring they look good while contributing towards high-performing and sustainable web pages.
Step 1: Download an image converter
We recommend using the WebP image format, an optimised image format for the web compatible with all major browsers. It provides similar quality to PNG and JPG files at a much smaller file size.
You need an image converter to turn your existing images into WebP images; we use AnyWebP.
Step 2: Preparing your image converter
Once you’ve installed AnyWebP, open it. Click the ‘Options’ tab. On the sliding scale, select 78%. You can adjust this as required but, in our experience, 78% balances quality and file size nicely. Remember:
- Lower percentage = higher compression = lower quality = smaller file size
- Higher percentage = lower compression = higher quality = bigger file size
In the bottom left, click the drop-down menu and select ‘JPG/PNG to WebP’.
Your selection isn’t saved between sessions; you’ll need to re-select your compression percentage every time you start the application or every time you click the Options tab.
Step 3: Compressing your image
Before we compress your image, verify that it is ready to be optimised for the web. Ensure the file is a JPG or PNG file. If you are using the image on an exeter.ac.uk website, ensure the dimensions match your use case by following our Working with images guidance. If you are unsure, most images should be 930×500.
Drag your image onto the AnyWebP application and click convert. You should see a 2nd copy of the image, now in WebP, appear in your Downloads folder.
You may see some small visual differences between the two photos but they should largely be identical.
Step 4: Pat yourself on the back
You’ve successfully contributed to our efforts to make each experience on our website a better one for our users, whilst helping us reduce the carbon footprint of our digital activities. Not bad!
Stuck? We’re more than happy to help. Drop us an email at digitalteam@exeter.ac.uk.
Bonus: Marginal gains…
It is more effective to compress from PNG than JPG. JPG is a lossy file type – it is already compressed. PNG is lossless, so retains the full original data to use for compression.
It’s always best to start from PNG if you can. If you already have JPG images, You can take them and save them as PNG by using Microsoft Paint. The resulting compressed WebP image will be leaner than directly converting a JPG image to WebP, further optimising your images for the web.