Because Performance Matters

WebP, the Other Image Format

By Shawn MaustSeptember 30, 2016

Currenty, 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.

WebP Logo

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.

1. Create images in WebP format

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

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

    (source)

Other Options?

Although there are other options out there, like FLIF and BPG (example), none of them have the 70% browser support rate that WebP has. Even JPEG XR, the once hopeful successor to JPEG still only has 7% support. So though WebP is not as popular as JPG and PNG, it has a significant advantage over other competing formats in terms of support. And with the potential benefits it provides, it’s one more viable way to additional performance gains.