Image optimization with webp

We already did a few articles about image optimization jpegoptim, jpegtran, optipng, pngcrush, and ImageMagick. Today, We want to describe image optimization with webp.

Minification and compression have long become quite standard things for optimizing web page code. All popular web resources optimize images, use the same CSS whenever possible, and choose the right image formats. But this is not enough. HTTP Archive statistics show that images occupy about 64% of the size of a web page. The new WebP standard comes in to help replace JPEG and PNG.

Briefly about WebP

The format appeared back in 2010 and has since been developed by Google. WebP is based on the compression algorithm for keyframes of the VP8 video codec, with or without loss, and is packaged in a container based on RIFF. WebP lossless images are on average 26% smaller compared to PNG, and WebP lossy images are 25-34% smaller compared to JPEG with the same SSIM index. The new format also supports transparency (known as alpha channel).

Principle of operation

In lossy compression, WebP uses predictive coding, in which the values of neighboring pixel blocks are used to predict the value of the desired pixel block, and then the difference is encoded.

Lossless compression uses well-known fragments of the image to accurately reconstruct pixels. A local palette can also be used if there is no matching algorithm that interests you.

Advantages and disadvantages

Behind:

• smaller image size;
• advanced compression algorithm;
• high image quality;
• support for transparency

Against:

• poor prevalence;
• “Plasticity” in compression with losses;
• colors in pixels and other computer graphics may be lost.

WebP is already supported in Chrome, Opera, and the standard Android browser, and with the help of the WebPJS library, it can be displayed in all popular browsers (in IE 6 and higher using Flash). In addition, a light library of encoding and decoding libwebp, command-line utilities for encoding and decoding WebP, as well as tools for viewing, multiplexing, and animating images in this format have been developed.

Installing cwebp

Cwebp have pre-compiled Linux binaries. So, installation is simple to download and unpack:

# wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3-linux-x86-64.tar.gz
# tar zxf libwebp-1.0.3-linux-x86-64.tar.gz 
# cp -a libwebp-1.0.3-linux-x86-64/bin/cwebp /usr/bin/
# cp -a libwebp-1.0.3-linux-x86-64/bin/dwebp /usr/bin/

Usage of cwebp

The cwebp utility is used to convert from JPEG, PNG, and TIFF, and dwebp is used for decoding. The conversion is started with a simple command (from the utility directory):

# cwebp input.png -q 80 -o output.webp

By the same principle, decoding can be started. There are many options and additional parameters, including for checking encoding.

WebP Deployment

So, you were interested in the new format, you did all the tests, looked at the statistics again, and made sure that Chrome is still the most popular web browser. What next? Next, you need to make a copy of all the images in WebP (you can write a simple script to convert all files), and then check the site users and palm off on them compact images, if their browser supports WebP.

That is, you can create your own script that will check the client’s browser for format support, which will then palm off the web server, or completely assign this task to the webserver. The second option seems to us more logical.

Negotiation using Accept header

Browsers pass the Accept header as:

in Opera:

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

in Chrome:

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

Knowing this, you can configure the webserver to automatically transmit WebP. As an example, we use Nginx, in the configuration file of which you need to add something like this:

location / {

  if ($http_accept ~* "webp")    { set $webp_accept "true"; }
  if (-f $request_filename.webp) { set $webp_local  "true"; }

  if ($webp_local = "true") {
    add_header Vary Accept;
  }

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

Apache configuration will be similar. If WebP support is not found in Accept, then ordinary files are transferred. Well, if Nginx is used as a proxy for caching statics, then the configuration will be different:

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;
  }
}

Conclusion

The WebP image format will significantly reduce the size of the web page, but given its limited support, you must additionally configure the web server and contain copies of all images in several formats.