The benefits of using next-gen image formats such as WebP on your website
Images account for around 50% of a website’s weight. Optimising your site to be lighter, means faster loading times and speed is a big key to improved rankings and conversions. Therefore, optimising your images on your website is a crucial search engine optimisation technique.
There are various ways of optimising your images before uploading to your site including resizing to serve scaled images, compression and using formats that are best for your requirements as well as your visitors.
The average web page weight is growing as technologies advance and websites become more complex in terms of design and functionality. In the early 2000s, the average web page was tiny in size as it compromised of less code, much smaller images and less complicated scripts. Today, advancements mean that web pages are forever growing in terms of size.
In 2010, the average web page was around 700kb. In 2014 that rose to 1.8mb and the trend is continuing.
Now most of us, will take an image on our phone or a dedicated camera and upload them to our websites. Some of us will do the right thing by resizing and compressing first – reducing the file size. However, with the advancements of camera sensors, those image sizes are still getting bigger and bigger even if the above is done. Therefore, optimising your images can see a significant reduction in file size. Welcome to WebP.
WebP is an image extension developed by Google as a replacement for PNG, JPG and GIFs. A format that nearly didn’t make it but is now likely to become the next-gen extension due to its versatility as a file format. Not only does it support better compression methods, but it also supports transparency and animations. It’s a file format that has all the benefits of the three major formats, rolled into one – with some extras thrown in for good measure.
WebP has actually been around for a while as it was originally announced back in 2010. It’s just not made it into the mainstream, though that looks likely to change now due to various reasons including the major browsers now supporting the format. Browsers supporting WebP include Chrome, Opera, FireFox, IE and Safari. That’s the majority of the market share.
So, what about the small percentage of browsers that don’t support the format? Well, that’s not a huge issue. Unlike other next-gen formats that haven’t made the cut, WebP can be served to browsers that support the format, whilst serving fallback formats to those that don’t. So, if a visitor uses Chrome, they get served WebP images rather than JPG’s and PNG’s. If they’re using a browser that doesn’t feature support, they get the fallback images – i.e. the originals. This means, that for most visitors, they get a smaller page in terms of weight and much faster load times. One of the other benefits of WebP is the ability to autogenerate WebP images from your current media library.
Pros of using WebP images on your website.
- Better compression. WebP images will be smaller in file size compared to those of JPG’s or PNG’s. You can expect to save around 35% compared to JPG’s and PNG’s without losing quality.
- One format to cover all bases. High-quality images, better compression, transparency and animations all within one extension type.
- Faster load times for your customers leading the path for improved rankings, lower bounce rate and improved conversions.
Cons of using WebP images on your website.
- You need to ensure if using some form of caching, that the two will play nice together as this is a new format that isn’t widely adopted as of yet.
If you’re using .htaccess rewrite rules to point to the WebP image, or are using the picture element, it should work as intended, even if you have page caching in place. If, however, you’re rewriting the HTML to replace the original image URLs with WebP URLs, this could be an issue, depending on how you have your page caching set up.
Google, however, are now using this on their PageSpeed tool as a recommendation for areas of improvement. They themselves are asking you to serve next-gen images.
If you’re not already using this optimisation technique, now is the time to do so.