How to use WebP to optimize images on your website?

Future-proof picture formats in the near future? Maybe start uploading WebP or other formats now?

“Google is actively promoting WebP and will continue to do so. But, as you know, this format is supported by 75% of browsers.

A good solution would be to have multiple image formats and return the desired type of image when the browser responds – supports WebP or not. Yes, this will lead to an increase in the number of files and fill up disk space, but it will give certain advantages over those who do not use the new formats.

The positive impact of the presence of the WebP format on the site on the search results has already been noticed. “

The expert advises to use the WebP format on the site, but use it among others. Let’s figure out what this format is and how it differs from others.

What is WebP?

WebP is a graphic image format. In 2010 Google developed it as an alternative to PNG and JPEG.

How it works?

Compression in this format is based on the keyframes compression algorithm of the VP8 video codec, and is packed into a RIFF-based container.

Lossy compression uses predictive coding: to predict a pixel block, the neighboring pixel block values ​​are used, then the difference is encoded.

Lossless compression, that is, lossless, uses known image fragments and reconstructs the pixels on their basis. If there are no matches for reconstruction, use the local palette.

Advantages and disadvantages of WebP?

Advantages of the format:

  • retains the same quality at a smaller image size: with lossy compression, the size will be on average 30% smaller than in JPEG, and without loss, on average 25% smaller than PNG. Confirmatory research in the next paragraph of the article;
  • combines all the advantages of PNG, JPEG and GIF, supports transparency and animation.

Disadvantages:

  • not all browsers support the format;
  • some colors may be lost in pixel art;
  • image may appear flat when compressed with loss.
JPEG and WebP formats
Image Comparison: Left JPEG, Right WebP

WebP vs JPEG: Research Findings

In January 2019, Google updated a study comparing image compression with WebP and JPEG.

How the study was conducted?

Two types of assessments were used. In the first case, they generated WebP images of the same quality as the JPEG images, and then compared the sizes of the resulting files. Quality was measured using the SSIM index, and a publicly available C ++ implementation was used for the calculation.

For the second evaluation, plots of quality and bits per pixel (bpp) were analyzed for WebP and JPEG. These graphs show the compromise between distortion and speed for both formats.

Images were taken from several sets:

  • Lenna – pictures 512 x 512 px;
  • Kodak – 24 images from the Kodak Color Image Set;
  • Tecnick – 100 RGB color images from the collection Tecnick.com;
  • Image_crawl – A random sample of PNG images from the Google Image Search web crawl database.

Research results:

The first scoring method found that for the same quality, the average WebP file size was 25-34% smaller than the JPEG file size.

comparison of image formats
Average file size with the same quality, JPEG Q = 75

Using the method of counting bits per pixel, the graphs showed that with the same SSIM index, WebP compression requires fewer bits per pixel than JPEG.

comparison of image formats
Graph for the Kodak dataset

It is clear from the research that WebP can provide better image compression than JPEG.

Which browsers support WebP?

The format is supported by Chrome, Opera, Android browser and other popular browsers, Mozilla was the last to announce support in Firefox. There are still Apple browsers that do not want to include support for this format. The reason may be that the company is developing a more modern AVIF.

According to information from the caniuse.com website , as of the second week of April 2019, the following data: WebP is supported by 78.49% of users’ browsers in the world.

image formats for the site
Statistics from caniuse.com

The format is not available in all versions of browsers that users open in the world. Multiple formats are recommended as long as there is a chance the browser might not handle WebP.

How to convert images to WebP?

Let’s look at several ways to convert images. This can be done using online services, installation apps, command line tools.

Online Tools:

Squoosh

Squoosh converts and compresses images online. It can handle large photos, illustrations, screenshots and icons in SVG, works with different formats. You can compare image options, control artifacts, adjust the desired compression level and monitor the final image size.

image compression service
Compress JPG to WebP in Squoosh

The 1.51 MB file after conversion now weighs 185 kB.

Online-Convert

Online-Convert.com converts online too. It works with images, documents, video, audio, archives and other formats. We are interested in the converter to WebP: it allows you to crop the image, set the size, adjust the image enhancements.

After converting, the file weighs 238.21 kB.

Zamzar

A simple online service Zamzar for converting images. Drag the image into the field, select the desired format from the list and click on convert, there are no other settings. The next step is to download the finished file.

compress image online
Application interface

The original file weighed 507.88 kB, the final 355 kB.

Applications:

Webpconv for Windows

Webpconv application for converting different formats to WebP. Works with installation and portable. Webpconv can convert multiple files at the same time, encode JPEG and PNG to WebP and vice versa. There is a menu to adjust the encoding to get a better quality file and adjust the final size.

converting images
Encoding settings window

Photoshop plugin for Windows and Mac

There is a separate free plugin for Photoshop that allows you to open and save 24-bit WebP images. The plugin is supported by Mac CS2 / 3/4, Mac CS5 / CS6 and Windows (32 & 64 bit). Doesn’t work on Photoshop CC.

image compression service
Format selection

WebPonize for Mac

To work with images for Mac, there is WebPonize, an open source project on Github. Once installed, you can convert images to WebP format on Mac – just drag and drop the image into the box.

compress image online
WebPonize Demo Image

Sketch for Mac

If you are working in the paid vector graphics editor Sketch, images from there can be exported directly to WebP.

convert image to webpr
Exporting an image in the editor

The editor is designed to work with devices based on MacOS, a free version is available for 30 days.

Command line tools:

JPEG, PNG and TIFF to WebP are converted using the cwebp utility, and decoded using dwebp.

The cwebp tool is the most popular tool for encoding images into WebP files. After installing the utility, you can adjust the image quality level, assign file names and work with other options.

# cwebp -q [quality] [input_file] -o [output_file]
cwebp -q 75 image.png -o image.webp

Decoding works the same way.

Node tools:

The most popular conversion libraries are Imagemin with the imagemin-webp plugin. An example of a script for converting all PNG and JPG files from a folder to WebP:

/ * convert-to-webp.js * /
const imagemin = require ("imagemin");
const webp = require ("imagemin-webp");
imagemin (["*. png", "* .jpg"], "images", {
 use: [
 webp ({quality: 75})
 ]
});

This script can be used from the command line or using the bundler:

node convert-to-webp.js

Setup for Mac OSX

You must have Xcode installed to configure. The order of further actions:

  1. Download and install MacPorts.
  2. Start Terminal.
  3. Update MacPorts to the latest version: type “sudo port selfupdate” and hit enter.
  4. To install libwebp ( WebP Library ) type “sudo port install webp” and hit enter.
translate image to webpr
Installation process

How to use WebP on your site?

If you want to use WebP format for browsers , make a copy of all WebP images and create a script that will check users’ browsers for WebP support. If there is support, the user will see pictures in this format.

In this case, a system with fallbacks is needed, in case the user’s browser does not accept WebP.

Checking browser formats:

A way where the script checks the browser for format support and, if available, returns WebP.

A system with fallbacks for WebP can be configured via the HTML5 picture element. Alternative formats are added using the source element inside picture. In addition, you need to leave the usual img, it will be used for browsers that do not support file formats through picture:

<picture>
 <source type = "image / webp" srcset = "image.webp">
 <source type = "image / jpeg" srcset = "image.jpg">
 <img src = "image.jpg" alt = "Image">
</picture>

Source element attributes to define format and conditions of use:

  • type – MIME type of the format;
  • srcset – path to the image file, you can use several files with different sizes and PPI – pixel density;
  • sizes – a list of the sizes of each file;
  • media – a request defining a source for displaying an image.

Optimization specialist Demi Murych advises against using this method, as it will increase the nodes in the DOM tree for each image, and this will increase memory consumption and slow down scripts.

Negotiation with the Accept header

A way that uses the Accept header.

Browsers pass the Accept header as a string. For the Opera browser, you need to specify all formats:

Accept: text / html, application / xml; q = 0.9, application / xhtml + xml,
image / png, image / webp, image / jpeg, image / gif, image / x-xbitmap, * / *; q = 0.1

For Chrome, only WebP needs to be specified separately:

Accept: image / webp, * / *; q = 0.8

You can configure automatic WebP transmission from the web server. The configuration in Nginx and Apache will be similar. Add a similar entry to the configuration file:

location / {

 # check for Accept header and file version in .webp 
  if ($ http_accept ~ * "webp") {set $ webp_accept "true"; }
  if (-f $ request_filename.webp) {set $ webp_local "true"; }

 # if there is WebP, then pass Vary
  if ($ webp_local = "true") {
    add_header Vary Accept;
  }

 # if the client supports WebP, then transfer the file
  if ($ webp_accept = "true") {
    rewrite (. *) $ 1.webp break;
  }
}

If Accept does not support WebP, then the server will transfer files of other formats.

The configuration will be different if Nginx is used as a proxy for caching static items. In this case, you need to check requests for the presence of the WebP indicator and redirect to remote servers:

server {
  location / {
   
    if ($ http_accept ~ * "webp") {set $ webp T; }
    proxy_cache_key $ scheme $ proxy_host $ request_uri $ webp;

    proxy_pass http: // backend;
    proxy_cache my-cache;
  }
}

The WebP format can be called promising – it allows you to lighten the image, while maintaining its quality, and therefore reduce the page size of the site. But not all browsers support this format, so we recommend having several options for images and configuring the web server to serve images to users in WebP, if there is support.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top