WebP, the Other Image Format

Currently, images make up around 64% of the average web page weight (1,598 kB of 2,480 kB), which makes them a great opportunity for performance optimization. Some basic tips include making sure images are the correct dimensions, in the proper format, and appropriately compressed. Today we’re going to look at the format part of this equation. Although JPG, PNG, and GIF currently make up 97% of the images currently being served, there are other formats that could be beneficial to consider. The focus of this article will be on WebP, an image format that provides a lot to be excited about.

Overview

Background

The WebP format came out of Google’s work on the WebM video format, and was announced in 2010. The goal was to be an open standard that would produce smaller files, but of comparable quality, compared to the existing JPEG format (source).

Pros

File Size: In initial tests, Google found that the new format resulted in 25%-34% better compression compared to JPEG, a 45% size reduction for PNGs found on the web, and a 28% reduction for PNGs that were re-compressed with pngcrush and pngout (source).
Lossy, Lossless, and Transparency options: WebP can be used for both Lossy and Lossless compression, as well as providing the option for transparency. This means that instead of using JPG for some situations and PNGs for others, WebP could be used in any of them.

Con

Support: Although over 70% of browsers support it, there are a few notable exceptions — Firefox, IE/Edge, and iOS Safari. This alone probably will prevent most people from going entirely to WebP without having a fallback in place.

Implementation

If you decide serving WebP versions of images is something you want to do, there are a couple things that will need to be done.

Create images in WebP format

This goes without saying, but to use WebP, you must first create images in this format.

One way to do it would be through the cwebp compression utility provided by Google. There are a few ways of installing this utility, with different options listed on Google’s documentation page.

Once installed, you can use the command via the command line:

$ cwebp -q 75 image.jpg -o image.webp

https://developers.google.com/speed/webp/docs/cwebp has documentation of all the options for the utility.

You can also use plugins for Grunt or Gulp to have the images conversion automated for you in your build process:
- Grunt-WebP
- Gulp-WebP
There’s also a Photoshop plugin to help with opening and saving files in this format.

Use the images on your web page

Although there are several ways to do this, here are two common options:

<Picture> tag

One option is utilize the <picture> tag, using the WebP image as the source, and then using a jpg as the fallback.

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

The main downside is that the <picture> tag is currently not supported in IE 11. However, this can be worked around by using the Picturefill polyfill

.htaccess (or other server side approaches)

Another option is to utilize an .htaccess file to only serve WebP files to browsers that can support them. The idea is to check if the browser supports it, and if so, to check and see if there is a WebP version of the file.

Apache

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(assets.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

(source)

Nginx

Instead of an .htaccess file, you can do a similar thing through modifying the relevant config files for Nginx.

# http config block
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}

# server config block
location ~* ^/assets/.+\.(png|jpg)$ {
    add_header Vary Accept;
    try_files $uri$webp_ext $uri =404;
}