Having a fast-loading website is increasingly important in Google search rankings, and the quality and performance of your images can significantly impact page load times. Optimising images for the web involves balancing image quality with file size to improve website load times, search engine rankings, and user satisfaction.
Understanding Image Formats: JPEG vs. WebP
Traditionally, JPEG has been the foremost format for web images due to its ability to compress files while retaining decent image quality. However, a newer format, WebP, is catching on and is worth considering.
JPEG is a lossy compression format, meaning it reduces file size by discarding some data, which can lead to a loss of quality, especially at higher compression levels. JPEGs are versatile and widely supported across all devices and browsers. They are particularly well-suited for photographs with complex colours and gradients, but not for images with straight lines, such as logos.
WebP, on the other hand, offers both lossy and lossless compression options. Developed by Google, WebP files are generally smaller than JPEGs while maintaining comparable quality. According to Google, WebP images are about 25-34% smaller than equivalent JPEG images. This reduction in file size can significantly improve page load times, which is crucial for SEO and user experience. However, despite its advantages, WebP isn't supported by all browsers (although as of 2024 over 90 percent of browsers do support it), so this may limit its use, depending on your audience.
There is also some concern that WebP may not be as good as JPEG for some types of images which have some fine detail. It’s worth doing some tests and see if this is the case for the your images.
PNG, which is the other widely used file format, is mainly used for logos and graphics and as it offers transparency and lossless compression. Having said that, I have supplied product photos as PNGs to a client as they wanted the products displayed on a background.
How to Optimise Images for the Web
1. Choose the right size: The platform on which your website is being hosted will dictate the ideal image size, expressed in pixels. For instance, Pixpa, which hosts this site, recommends images to be 2048 pixels wide. Other sites will have different specs, so it’s worth checking. Once the 2048 images have been uploaded, the site then resizes them automatically according the device the viewer is using. This ensures that mobile users don’t download the large desktop version of an image, saving data and improving load times.
2. Compress Images: Compression reduces file size, which speeds up load times. Tools like Adobe Photoshop, Lightroom, or dedicated online tools like TinyPNG or Squoosh can be used to compress images while maintaining quality. Try and find one which offers a choice of compression quality. For JPEGs, use a quality setting that balances quality and file size—typically around 60-80% quality. For WebP, experiment with settings that keep the file size low without compromising too much on quality. I’ve found 70-80% compression works well.
As an experiment, I optimised a couple of my images to see which format and compression worked best. My usual workflow is to export images from Adobe Lightroom as jpegs at 2048 pixels wide (for a horizontal image) at 75% compression.
This yielded a 863kb image for a sunset photo and 587kb for a photo of a cap on a white background. I then created WebP images of the same files by opening them in Photoshop and using the “save as” command to save a WebP file at 75% compression. This yielded a 555kb file for the beach scene and 334kb for the cap - so a fairly significant saving of 34%.
Leveraging WordPress Plugins for Image Optimisation
If you are using WordPress, there are several plugins available that can help serve images in the optimal format based on the user’s browser capabilities. Some popular plugins include:
Smush: This plugin optimises images by compressing them without losing quality. The pro version supports WebP format and allows you to serve WebP images to supported browsers while falling back to JPEG or PNG for unsupported browsers.
Imagify: Another tool for image optimisation, Imagify offers conversion to WebP format. It can automatically serve WebP images if the visitor’s browser supports it.
ShortPixel: This plugin optimises images and converts them to WebP format. ShortPixel also provides the necessary functionality to serve the correct image format based on browser compatibility.
Conclusion: WebP or JPEG?
While JPEG has been the standard for years, WebP is increasingly becoming the preferred format for web use due to its superior compression capabilities. As I understand it the only browsers which don’t support it is Internet Explorer. This browser was officially retired by Microsoft in 2022 so the number of users is likely to dwindle over the coming years. Thus it seems that WebP is likely to become the standard for web images, especially since Google is behind it.
The platform you are using, such as Wix or Pixpa, will probably do the conversion automatically, or if you are using Wordpress choose one of the above plugins. So although JPEG is likely to be supplanted by WebP, it is still the format in which you will upload your base image. By following best practices for resizing and compressing images, you can ensure that your website not only looks great but performs optimally, giving your audience the best possible experience.
