Apple announced a ton of new updates at yesterday’s WWDC20 keynote address, from new hardware to updated applications. There’s lots to gawk at and enough device-envy to go around.
But there’s one little line in the Safari 14 Beta release notes that caught my eye:
Added WebP image support.
🎉🎉🎉
This excites me because WebP is a super progressive format that encodes images in lossless and lossy formats that we get with other image formats we already use, like JPEG, but at a fraction of the file size. We use WebP right here at CSS-Tricks, thanks to Jetpack and its Site Accelerator feature that serves WebP versions of the images we upload to browsers that support them. Jeremy Wagner has a great write-up on WebP and how to work with it, specifically for WordPress.
So, yes, this means WebP will be largely supported across the board (:IE-sad-trombone:) once Safari 14 ships.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 32 | 65 | No | 18 | 16.0 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 123 | 124 | 4.2-4.3 | 14.0-14.4 |
Even with that great support, defining fallbacks with the <picture> element is still a good idea.
<picture>
<source srcset="img/cat.webp" type="image/webp">
<source srcset="img/cat.jpg" type="image/jpeg">
<img src="img/cat.jpg" alt="Alt Text!">
</picture>Oh, and not to be completely overshadowed, Safari 14 also squeezes in some CSS goodies, like the :is() and :where() pseudo class functions, which we linked up a couple of weeks ago. Jen Simmons picked out other key features we should be excited about.
Safari 14 Beta Release Notes
— Jen Simmons (@jensimmons) June 22, 2020
• Added WebP
• Changed to derive <img> aspect ratio from size attributes
• Added :is()
• Added :where()
• Safari no longer supports Flash
• Added Safari Web Extensions
• Added Webpage Translation (Beta)
& much more: https://t.co/qO2Cy7rK4A
Yeah!!!! welcome to a few years back Apple
I’d written up a post on my site nearly 10 years ago, just after WebP had been announced (it was being called “weppy” at the time). I mentioned there was promise with a Safari plugin. It’d been supported until ~2015 https://github.com/nickzman/weppy/releases/tag/v1.0.3
We’ve all been waiting a long time to see Safari support but now that we’re getting it, I’m starting to wonder more about the politics of browsers vs actual tech… https://siipo.la/blog/is-webp-really-better-than-jpeg
Must-read: https://siipo.la/blog/is-webp-really-better-than-jpeg
This has made my day! It’s about time!!!!!
I recently noticed that webp is supported in Firefox, so I set up a script to convert a bunch of png images to webp. The funny thing is, in some cases, a maximally-compressed lossless webp image is bigger than a Zopfli-compressed png. It doesn’t happen often, and Zopfli takes a lot longer to compress a png, but it’s worth looking for.
Following up – one of the things that WEBP does afford is the possibility of animated images that also include transparency (think Gif89a but with full color) https://mathiasbynens.be/demo/animated-webp
Can’t wait – Insta, Twitter and every other social will be overrun with better looking motion :)
Kind of wish they’d support webp in Finder MacOS too so we can view the images locally at least.
YES! Agreed. Would love to see that. There’s a Quick Look Plugin I use called “Glance” (it’s on the AppStore) which allows a lot of other previews for a lot of formats that native macOS doesn’t support. Maybe @samuelmeuli would consider adding webp? https://github.com/samuelmeuli/glance/issues/26