Use WebP images to improve page speed on website

How to optimize images on site with WebP

6 Shares
6
0
0

Minification and compression have long been fairly 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 that’s not enough. HTTP Archive statistics show that images take up about 64% of the size of a web page. The new WebP standard comes to the rescue, capable of replacing JPEG and PNG.

Briefly about WebP

The format appeared back in 2010 and has been developed by Google ever since. WebP is based on the VP8 keyframe compression algorithm with and without losses, and is packaged in a container based on RIFF. WebP loseless images are on average 26% smaller than PNG images, and WebP lossy images are 25-34% smaller than JPEG images with the same SSIM index. The new format also supports transparency (known as alpha channel).

Principle of operation

Lossy compression in 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 coded.

Lossless-compression uses already known fragments of the image to accurately reconstruct pixels. A local palette can also be used if there are no matches of interest to the algorithm.

Pros and cons

Pros

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

Cons

  • poor prevalence;
  • “plasticity” in lossy compression;
  • can lose colors in pixel and other computer graphics.

WebP is already supported in Chrome, Opera and the standard Android browser, and with the help of the WebPJS library can be displayed in all popular browsers (in IE 6 and above with Flash).

There is also a lightweight libwebp encoding and decoding library, command line utilities for encoding and decoding WebP, and tools for viewing, multiplexing and animating images in this format.

Installing utilities and converting to WebP

All the tools can be downloaded from the Google developer page. They exist for Windows, Linux and MacOS X in compiled form, but you can also download the source code for development (opensource, after all) or to compile yourself.

The utility cwebp is used to convert from JPEG, PNG and TIFF, and dwebp is used to decode.

The conversion is started with a simple command (from the directory with utilities):

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

The same principle is used to start decoding. There are many options and additional parameters, including for checking the encoding.

Deploying WebP

So you’re interested in the new format, you’ve run all the tests, you’ve looked at the statistics again, and you’re convinced that Chrome is still the most popular web browser. What’s 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 users of the site and give them a compact image, 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 slip the web server, or leave this task entirely to the web server. The second option seems more logical to us.

Reconciliation with the 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, it is possible to configure the web server to automatically pass WebP. As an example, we use Nginx, in the configuration file of which we need to add something like this:

location / {
  # check the Accept header and the version of the file in .webp
  if ($http_accept ~* "webp") { set $webp_accept "true"; }
  if (-f $request_filename.webp) { set $webp_local "true"; }
  # if WebP is there, 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;
  }
 }

That is, if no WebP support is detected in Accept, regular files are transmitted.

Well, if Nginx is used as a proxy to cache statics, 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;
  }
 }

Most importantly

The WebP image format will significantly reduce the size of the web page, but given its limited support it is necessary to further configure the web server and keep copies of all images in multiple formats.

How and where can I optimize webp images online?

To optimize webp images online you can use https://www.compresss.com/compress-webp.html.

How to optomize webp images using node js?

To optimize webp images with node.js, you can use webp-converter library.

6 Shares
Leave a Reply

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

You May Also Like