Written by: Eric Kiefer | April 7, 2023
Some of us older web developers who've been around since the web's infancy have a tendency to get stuck in our ways, or at least resist change until it beats down our door. It's not always bad to be cautious when adopting new web design trends and techniques, as they are not always widely supported by all web browsers. While WebP was announced 12 years ago in 2010, it did not enjoy widespread support until much later. Since its primary use is in website design, it still may not work with all local applications on your Windows or Mac based computer. WebP is, however, supported by almost all modern browsers. There's plenty of reason to be prudent in ensuring compatibility with older browsers, but it isn't worth delivering bloated content to support IE6 (for example). The main advantage of WebP is file size. WebP images at the same quality are much smaller files than their JPG counterparts and for images with transparency, much smaller than PNGs.
Have a look at the two images below. The image on the left is jpg while the image on the right is WebP. For our purposes here I've just used medium (50%) quality for both. WebP images do seem to be generally less saturated than their jpg counterparts.
JPG Image | 50% quality | 65kb
WebP Image | 50% quality | 25kb
The original image was a raw file directly from a Canon 80d dSLR. Apart from a slight difference in saturation, the images are virtually identical. The file size, halved with no loss in quality, is the big deal here. With most web users browsing via mobile devices, it is just as important as ever to keep images efficient and load times fast. Just like with JPG compression, you can find that magical balance between quality and file size and often get as good a result in a much smaller package. Let's have a look at how WebP stacks up against PNG in a transparent graphic. For this example we've used the logo of one of our clients, Landscape Montana.
PNG Image | 22kb
WebP Image | 50% quality | 13kb
Look out for AVIF, another next-gen image format that promises even better compression and deeper color profiles. I'm sure we'll be seeing a lot more of it in the coming years, but currently it is not widely supported enough to recommend for all websites
WebP is supported by Photoshop 24 and up. Newer versions of Gimp also support WebP. Adobe has released a plugin for older versions of Photoshop, and there is also a plugin for Windows. Modern Macs can view WebP without additional software. WebP also supports animation similar to GIF with the added bonus that there is no heated debate over how to correctly pronounce "WebP". If you're a web site owner or web developer, it is a great time to embrace WebP. It enjoys wide support on both local machines and in web browsers, and it helps speed up the internet, which is no bad thing!
If you use us for your web development or maintenance, drop us a line to talk about converting your existing images to WebP. In many cases this can be included with your Website Maintenance plan.