Today you’ll learn how to instantly make your websites and web apps load faster, by leveraging WebP, a powerful image compression technology by Google. WebP is a close cousin of the WebM format (video compression) which I recently covered here on TechStacker.
You’ll also learn how to use two simple WebP fallback methods for blasphemous... I mean not-so-modern web browsers.
Speed is a feature
Making your website load fast should always be a top priority. Nobody has patience. Even as little as one second can cost you thousands, millions or even billions of dollars in revenue.
Bold claim eh? Well, according to Amazon’s own calculations, even a slowdown of one second could cost them $1.6 billion in sales per year.
According to Google’s own tests, 53% of mobile users leave your site if it takes more than three seconds to load.
As you might know, one of the main reasons for slow page loading is images. Or rather the accumulation of various images types from pictures to various graphic types like icons and logos.
And that’s where WebP enters the picture.
Image Optimization With WebP
Surprisingly, most people who work in tech, don’t use WebP. This is a shame because doing so will massively boost the average page loading speed on any website you use it on.
The most common image types used on the web, are PNG, JPG, GIF, and SVG. I mean common to those of us who work with image files on a regular basis. The general public doesn’t know anything about file formats.
Hopefully, WebP will soon be on that list, but it won’t happen until we developers, designers, and general tech people start to use and promote modern web technologies. WebP was released in 2010, so it’s not exactly a new technology, but adaptation has been tragically slow.
Here’s what’s glorious about WebP
You can convert any of the common file formats into WebP. While maintaining their original quality (lossless compression).
According to this WebP compression study, a WebP version of a JPG file will take up to 34% less space than the original JPEG file. And up to 45% of a PNG image — without quality loss
Is WebP compatible with all web browsers?
No, but you can still use WebP without breaking/hurting your images in other browsers, by using a fallback. So far, WebP only works fully in Chrome and Opera. FireFox is working on adding it. Edge has no announced plans of doing so as I’m writing this.
Let me repeat, because it’s an important point:
You can use WebP and enjoy all its advantages over PNGs and JPEGs, for all your Chrome and Opera users. By adding a simple fallback, your visitors using FireFox or other browsers will simply load the original file type (and bigger file size). Whether it’s PNG, JPEG, or something else.
And by the way:
Chrome, Opera, and Android fully support WebP, together they make up 74% of all Internet users!
Did I remember to tell you that compatibility is a non-issue for Firefox, Safari, and Explorer/Edge users? Bless the mighty fallback.
How to use WebP with fallback (Manual)
There are several ways to create a fallback for WebP. This is one of the most basic implementation methods:
<picture>
<source srcset="your-image.webp" type="image/webp">
<img src="your-image.jpg">
</picture>You simply add one reference to the WebP format and one reference to the original file format (JPEG, PNG etc.). Then browsers that support WebP will show that format, and the others will show whatever format the original image file is.
But the above can quickly lead to a lot of redundant manual labor. You can also automate the entire process by leveraging one of the high-end Cloud file hosting companies. Let’s see how that works next.
How to Automate WebP Conversion
Here at TechStacker, we use the glorious Cloudinary to host our images. Inside your image settings, Cloudinary gives you an option called auto which you can add to every image you want to use WebP on.
Cloudinary will then automatically serve your images with the auto tag in WebP format, for all visitors who use Chrome or Opera.
From JPEG to WebP
Take this glorious artwork by my friend, Aaron Read:
A talented illustrator & designer, working out of Copenhagen.
The image above is in the JPEG format. It’s hosted on TechStacker’s Cloudinary account, using the f_auto tag in the URL (which automatically serves a WebP version to Chrome/Opera users):
If you view this image in Chrome or Opera, it will take up 58KB. If you view it in FireFox or another not-WebP compatible browser, it will take up 68KB.
That’s a 15% difference and that’s actually on the low-end of how much you can compress JPEGs (up to 34%).
It’s easy to test. Just open up the image URL above, in Chrome and FireFox, then download it, and compare the file sizes (and formats). Don’t worry about the URL path above using the .jpg extension, it will be served as .webp inside Chrome and Opera.
Now imagine that you have 10, 20 or several 100s of images of various file formats and sizes on your website. This is when WebP shines. The total reduction of data streaming from your web host/image host and the reduced bandwidth usage from your users is beyond massive.
We’re not just talking about saving megabytes, we’re talking gigabytes and potentially more (if your platform is big). That’s a serious amount of energy, time, and money saved — and with little to no effort on your part!
Conclusion
Not only is speed a feature, it’s often the most important feature. Especially in a competitive environment, where your website is not the only game in town. You now know how to use WebP to massively reduce image file sizes and page load. This directly affects you or your clients’ bottom line, and of course, what’s most important: the user experience.
