The News
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.
Cool.
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 Overview
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.
Cover photo by Markus Spiske on Unsplash
Top comments (5)
WebP has such a nuance - not all browsers support it. For example, iOS Safari, regular Safari, IE - do not support WebP. caniuse.com/#feat=webp Therefore, you must always store at least two versions of each image. Webp (for WebP-enabled browsers) and original image. And give the right version depending on the browser. And the original image must also be optimized/compressed - so that even for browsers without WebP support, images will be optimized (lighter in weight) - this is the third! version of the file.. At the optipic service, I recently noticed a new functionality in which all of this is already in the box. optipic.io/en/cdn/ You can even connect everything so that the urls of the images do not change (they remain exactly the same and look like internal urls on my site). But in fact, they are loaded through their system with automatic compression, conversion to webp and recognition of webp support. It turns out that everything is simple and beautiful, and inexpensive))
That service does look useful. The next release of iOS and regular Safari actually will have support for WebP, so I guess IE will be the only browser of note left (although it usually isn't counted among modern browsers).
I suspect with Safari coming on that it will be the de facto format until the next thing catches on.
Middle-out compression, anyone?
Very true - until it trickles down to "everyday life" use, I'm not sure how far browser adoption will take it. Everyone should just agree to change at the same time - simple!