WebP is an Open Source image format developed at Google, which promises to generate images smaller in size compared to JPG and PNG formats, while generating better looking images.
WebP supports transparency, like PNG and GIF images.
WebP supports animations, like GIF images
And, using WebP you can set the quality ratio of your images, so you decide if you want to get better quality or a smaller size (like it happens in JPG images).
So WebP can do all GIF, JPG and PNG images can do, in a single format, and generate smaller images. Sounds like a deal.
If you want to compare how images look in the various formats, here’s a great gallery by Google.
WebP is not new, it’s been around for several years now.
How much smaller?
The premise of generating smaller images is very interesting, especially when you consider than most of a web page size is determined by the amount and size of the image assets the user should download.
Google published a comparative study on the results of 1 million images with this result:
WebP achieves overall higher compression than either JPEG or JPEG 2000. Gains in file size minimization are particularly high for smaller images which are the most common ones found on the web.
You should experiment with the kind of images you intend to serve, and form your opinion based on that.
In my tests, lossless compression compared to PNG generates WebP images 50% smaller. PNG reaches that file sizes only when using lossy compression.
Generating WebP images
All modern graphical and image editing tools let you export to
Command-line tools also exist to convert images to WebP directly. Google provides a set of tools for this.
cwebp is the main command line utility to convert any image to
.webp, use it with
cwebp image.png -o image.webp
Check out all the options using
WebP is currently supported by
- Opera Mini
- UC Browser
- Samsung Internet
However, only Chrome for Desktop and Opera 19+ implement all the features of WebP, which are:
- lossy compression
- lossless compression
Other browsers only implement a subset. Safari and IE do not support WebP at all, and there are no signs of WebP being implemented any time soon in those browsers.
But Firefox supports WebP since version 65 (Jan 2019) and Edge since version 18.
So if we can serve those users an optimized image, to speed up serving them and consume less bandwidth, it’s great. But check if it actually reduces your images size.
Check with your JPG/PNG image optimization tooling results, and see if adding an additional layer of complexity introduced by WebP is useful or not.
How can you use WebP today?
There are a few different ways to do so.
You can use a server-level mechanism that serves WebP images instead of JPG and PNG when the
HTTP_ACCEPT request header contains
The first is the most convenient, as completely transparent to you and to your web pages.
Another option is to use Modernizr and check the
If you don’t need to support Internet Explorer, a very convenient way is to use the
<picture> tag, which is now supported by all the major browsers except Opera Mini and IE (all versions).
<picture> tag is generally used for responsive images, but we can use it for WebP too, as this tutorial from HTML5 Rocks explains.
You can specify a list of images, and they will be used in order, so in the next example, browsers that support WebP will use the first image, and fallback to JPG if not:
<picture> <source type="image/webp" srcset="image.webp"> <img src="image.jpg" alt="An image"> </picture>
More browser tutorials:
- Some useful tricks available in HTML5
- How I made a CMS-based website work offline
- The Complete Guide to Progressive Web Apps
- The Fetch API
- The Push API Guide
- The Channel Messaging API
- Service Workers Tutorial
- The Cache API Guide
- The Notification API Guide
- Dive into IndexedDB
- The Selectors API: querySelector and querySelectorAll
- The Document Object Model (DOM)
- The Web Storage API: local storage and session storage
- Learn how HTTP Cookies work
- The History API
- The WebP Image Format
- XMLHttpRequest (XHR)
- An in-depth SVG tutorial
- What are Data URLs
- Roadmap to learn the Web Platform
- CORS, Cross-Origin Resource Sharing
- Web Workers
- The requestAnimationFrame() guide
- What is the Doctype
- Working with the DevTools Console and the Console API
- The Speech Synthesis API
- How to add a class to a DOM element
- How to loop over DOM elements from querySelectorAll
- How to remove a class from a DOM element
- How to check if a DOM element has a class
- How to change a DOM node value
- How to add a click event to a list of DOM elements returned from querySelectorAll
- WebRTC, the Real Time Web API
- How to replace a DOM element
- How to only accept images in an input file field
- Why use a preview version of a browser?
- The Blob Object
- The File Object
- The FileReader Object
- The FileList Object
- The URL Object
- Typed Arrays
- The DataView Object
- The BroadcastChannel API
- The Streams API
- The FormData Object
- The Navigator Object
- How to use the Geolocation API
- How to use getUserMedia()
- How to use the Drag and Drop API
- How to work with scrolling on Web Pages
- Keyboard events
- Mouse events
- Touch events
- How to remove all children from a DOM element
- How to make a page editable in the browser
- How to remove all CSS from a page at once
- How to use insertAdjacentHTML
- Safari, warn before quitting
- How to reset a form
- How to use Google Fonts