Earlier this week, the last great browser bastion of resistance to supporting WebP image formatting fell, as Apple announced during their WWDC Keynote that the upcoming beta release of Safari 14 would finally include support for WebP images.
The irony here is that, as I'm about to write about the virtues of WebP, it's not a supported image type on Dev.to (whether through direct upload or URL link). I spent a fair amount of time excitedly converting some photo and video examples to WebP images for demonstration - only to realize I wouldn't even be able to use them in this post about...WebP.
This a perfect example of the extant problem with WebP - the image format is still not (yet) widely supported enough to create a sudden stampede of converts, even with its acceptance by all major browsers.
Most daily users will be looking for support in the various media sharing template upload sites that exist (from Instagram to messaging keyboards to other blog hosts) and in their local OS image previewer (like macOS Catalina's Preview) - without that, there's not much reason to use WebP in daily life (unless you have your own webpage).
Will Apple's reluctant acceptance of WebP support in Safari begin to shift the tide? That remains to be seen.
Some of you may have gotten to this point of the article and are now wondering what, exactly, WebP is. The rest of the post is for you.
WebP was released 2010 and was/is developed by Google as a next generation image format. It supports lossy and lossless compression and provides significant file size reduction in comparison to (old) standard image file types, like JPEG (25-34% smaller), PNG (45%), and GIF(up to 64%), with no loss in image quality.
There have been many successful attempts to improve upon the older generation file types, but only WebP has been adopted by most major browsers (with the notable exception of Safari, until recently). The main benefit of smaller file sizes is faster webpage loading times.
You can play around with tools like Google Lighthouse to see just how much faster a specific webpage could be (taking other optimizations into account as well) - and the speed increase can be significant (think multiple seconds).
Google also offers some precompiled utilities if you would like to experiment with converting image files on your own machine. If you have the
Homebrew terminal package installed, you can simply run
brew install webp to get the conversion utility and use this guide to help with the correct notation.
Thanks for reading, and happy coding!