Optimising images reduces unnecessary file size while keeping them suitable for the page. This can help pages load more efficiently, particularly on mobile connections.
1. Choose the right image dimensions
Do not upload an image that is significantly larger than the size it will be displayed at.
For example, if an image will only appear at around 800 pixels wide, there is usually little benefit in uploading a much larger version unless the design specifically requires it.
2. Choose an appropriate format
Use an image format suitable for the type of image:
- JPEG: useful for many photographs.
- PNG: useful when lossless quality or transparency is required.
- WebP: provides efficient compression and supports transparency.
- AVIF: can provide highly efficient compression and is supported by modern browsers.
The best choice depends on the image and browser support requirements.
3. Compress the image
Compress images before uploading them or use an image optimisation feature provided by your website platform or hosting setup.
For photographs, some compression can significantly reduce file size while maintaining acceptable visual quality. Check the result rather than using the highest possible compression automatically.
4. Use responsive images
A website should not always send the same large image resource to every device.
HTML features such as srcset and sizes allow the browser to select an appropriate image resource based on the display conditions.
WordPress can generate and use responsive image sources automatically for many images.
5. Use lazy loading where appropriate
Images that are below the initial visible area can often be lazy-loaded so they do not all need to load immediately.
Do not blindly lazy-load every image. Important images that are immediately visible may need to load without unnecessary delay.
6. Add useful alternative text
Image optimisation is not only about file size. Meaningful images should also have appropriate alt text describing their purpose or content.
Decorative images can generally use an empty alt attribute when appropriate.
7. Check the finished page
After optimising your images, test the actual webpage using Google PageSpeed Insights or another performance tool.
Check image quality, loading behaviour and the page’s appearance on mobile and desktop.
Salesforce
