You are currently offline, so some features of this site may not work fully.

Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

A short guide on how to automatically generate and use the new WebP format images in your workflow.

What is WebP?

Logo for WebP. (Source: https://en.wikipedia.org/wiki/File:Webp-logo-wordmark.svg)

WebP is a new image format being developed and pioneered by Google — who are calling it “A new image format for the web”.

This new format aims to compress filesizes drastically — without impacting image quality, with the aim of faster delivery and ultimately faster websites.

Current browser support for WebP

Can I Use shows that WebP is supported by the latest versions of WebKit, but I know that Firefox have plans to implement it also.

Current WebP (lossy) support:

  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)

Current WebP (lossy, lossless & alpha) support:

  • Google Chrome (desktop) 23+
  • Google Chrome for Android version 25+
  • Google Chrome for iOS version 29+
  • Opera 12.10+
  • Native web browser, Android 4.2+ (JB-MR1)
  • Pale Moon 26+

Source: https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp

Performance benefits

From what I’ve implemented so far I’ve been able to make vast filesize savings on both .PNG and .JPG images.

A screenshot of a terminal window showing the filesize savings when converting from .JPG to .WebP images - details below
A summary of the filesize savings
Filesize (bytes)Filename
104994danielfurze-talk_1400x750.jpg
31952danielfurze-talk_1400x750.webp
35822danielfurze-talk_700x375.jpg
13040danielfurze-talk_700x375.webp

Evidence from Google’s tests claim a 26% saving in .PNGs and 25-34% in .JPGs.


How to use WebP in your work

So without further ado, here’s some code you can dig into (read: copy & paste) for your project work to start using WebP right away.

Automatically generating WebP images

I use gulp-webp to have WebP images automatically converted from JPGs and PNGs during my CI build. First install the Node module and save it to your project’s devDependencies:

npm install gulp-webp --save-dev

Use the following code snippet to create a webp task, pipe the images into the gulp-webp node module and then return the images to the directory that you store build artefacts (there’s no need to keep these files in source control if you generate them each time).

gulp.task('webp', function () {
  return gulp.src('source/images/**/*')
  .pipe(webp())
  .pipe(gulp.dest('dist/images/'))
})

Here’s some I converted earlier…

A photograph of a llama’s head
.JPG format (optimised with ImageOptim - 297282 bytes)
A photograph of a llama’s head
.WebP format (11926 bytes)

Can you tell the difference?! (Image source: https://www.flickr.com/photos/tambako/7439222306)

See also Google’s extended gallery for comparisons.

Providing fallbacks with picture

We’ve already been through the browser-support for WebP, so what can you do for those that don’t support this new-fangled format?

I use the new(ish) built-in picture element to offload the detection of WebP support to the browser, and provide fallback image formats for those browsers that don’t support it yet.

<picture>
  <source srcset="image.webp" type="image/webp">
  <!-- WebP for those that support it -->
  <source srcset="image.jpg">
  <!-- Original image (JPG/PNG) for those that don’t -->
  <img src="image.jpg" alt="Daniel Furze at a talk">
  <!-- Fallback <img> tag -->
</picture>

There are other ways to detect if a browser supports WebP via Modernizr or by writing your own JavaScript detection, but if your target audience supports the <picture> element then I’d go right ahead and use this method and let the browser do the work.


TL;DR

A quick overview of how to start using WebP images in your projects now, though at the time of writing they aren’t widely supported by browsers just yet.

These two snippets of code in your task runner and markup will enable you to take advantage of WebP images straight away, regardless of the current state of browser support for them.