What is WebP?
WebP is a modern image format developed by Google. It allows you to create much smaller file sizes without losing image quality.
As an example, check out this 1800px by 1200px photo. I saved it out in JPEG and WebP formats at a 90% quality setting.
The JPEG version is 411 KB and the WebP version is only 258 KB. That's a savings of 153 kilobytes. And there is almost no detectable quality difference between the two!
You can view and compare these two images full-size here: JPEG Image | WebP Image. Make sure you're using a browser that supports WebP, of course.
Now, imagine this file size reduction across an entire website. It could be particularly impactful on image-heavy websites and on slower mobile networks. But it's relevant and useful on every website that loads images.
Which browsers support WebP?
WebP is currently supported in every major browser except Safari and Internet Explorer. Check caniuse.com for the latest support info.
Don't wait for Safari to catch up
Progressive Enhancement is the idea of providing a core experience that works for everyone, then adding enhanced functionality for those who can take advantage of it.
In this case, we can improve the experience for every visitor using Firefox, Chrome, or Edge by loading lightweight WebP images. Visitors using Safari and IE will still be able to see images in JPEG, PNG, or GIF format.
How to use WebP in HTML
Instead of using a single <img> tag, use the <picture> tag to provide two image sources. Web browsers will skip image formats they don't support.
<picture>
<source srcset="laptop.webp" type="image/webp">
<source srcset="laptop.jpg" type="image/jpeg">
<img src="laptop.jpg" alt="Laptop">
</picture>Every browser that supports WebP will load laptop.webp and all others will load laptop.jpg.
How to use WebP in CSS
First, we have to use JavaScript to find out if the browser supports WebP.
The script below will try to create a 1-pixel by 1-pixel WebP image. If the image loads successfully, the script will add a .webp-supported class to the <body> tag.
<script>
// Check for WebP support
var webpImg = new Image();
webpImg.onload = function(){
document.body.classList.add("webp-supported");
};
webpImg.src = "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoBAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==";
</script>Now you can use this CSS class to change a background image's source if WebP is supported.
.banner {
background-image: url('banner.jpg');
}
.webp-supported .banner {
background-image: url('banner.webp');
}How to create WebP images in Photoshop
You'll need to install a Photoshop plugin to save images in the WebP format.
Google created an open source plugin for this – check it out on GitHub. Installation is very easy. It only took me a minute.
Extra work now for long-term benefits
If you start using WebP now, you'll improve the experience for many users right away. In the future, when Safari adds support, those users will get an upgraded experience as well, without any extra work on your part.
Ready to discuss your project?
Send me a message and I'll get back to you within one business day.