How to improve your page speed using the WebP image format

WebP is a modern image file format developed by Google with the simple intention of making the web faster. Google estimates about 65% of current internet traffic is used for downloading image and photo data. Limiting the amount of data sent across the web would increase the overall speed for all internet users.

It’s almost been a year since Google announced that page speed was one of the primary factors that influence their ranking algorithm for mobile search and 9 years since it impacted the desktop algorithm. Google recommends you use their new page speed tools, called Lighthouse, to help increase your rank in their listings.

The WebP image format sounds promising, not only to optimise the page speed of your website but also to save your customer money when downloading your content. WebP employs both lossy and lossless compression based on the intra-frame coding. Below is the example of jpeg and WebP image.

Photo by Abigail Lynn on Unsplash and has been resized to match your viewport.

Comparing both images I really couldn’t notice any difference. With a 52% size saving, this could mean a huge improvement to your page speed and also the opportunity to save your customer money: about 10–50 cents. That’s game-changing.

With these great benefits there are also some cons, and as of this date (May 2019), WebP almost supports only the latest major web browsers.

Implement WebP on your website

Creating a WebP image is easy but implementing WebP on your website can be more complicated especially if you have a ton of images on your website. The most convenient way to deal with this, is to only serve WebP version if the image exists and the browser supports it.

Server detection

You can put this snippet to your .htaccess file to serve a WebP version of the image if the file exists.

# Vary: Accept for all the requests to jpeg and png
SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
  RewriteEngine On
# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
  # Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  # Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
  Header append Vary Accept env=REQUEST_image
AddType image/webp .webp

Client-side detection using Javascript

You can easily detect whether the browser supports WebP using the Modernizr plugin and creating a simple code to load your WebP image (if browser supported).

Modernizr.on('webp', function (result) {
if (result) {
// Has WebP support
}
else {
// No WebP support
}
});

WebP using HTML5 format

<picture>
<source srcset="/path/to/image.webp" type="image/webp">
<img src="/path/to/image.jpg" alt="insert alt text here">
</picture>

If your website is running on WordPress, I recommend that you use the Imagify service (we recommend this to lots of clients who have loads of images on their site), as this plugin easily converts your images on upload to the WebP format and does the auto-detection for you.

Many famous websites that you use every day, such as Netflix, already use these WebP images on their website to ensure you have the best experience when looking at a bunch of movie posters.

If you are interested in implementing this on your website don’t hesitate to contact us.


Originally published at www.digital-noir.com on June 13, 2019.