DEV Community

loading...
Cover image for Will WebP Finally Start Catching On?

Will WebP Finally Start Catching On?

btbacker profile image Brandon Backer Updated on ・2 min read

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.


Alt Text

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

Discussion

pic
Editor guide
Collapse
alexbeglov1989 profile image
alexbeglov1989

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))

Collapse
btbacker profile image
Brandon Backer Author

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).

Collapse
ben profile image
Ben Halpern

I suspect with Safari coming on that it will be the de facto format until the next thing catches on.

Collapse
btbacker profile image
Brandon Backer Author

Middle-out compression, anyone?

Collapse
btbacker profile image
Brandon Backer Author

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!