WebP Image Support Coming to iOS 14

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.

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

— Jen Simmons (@jensimmons) June 22, 2020

Direct Link →