WebP Finally Lands in Safari
Amid the flurry of announcements at WWDC20, a quiet but significant change slipped into the Safari 14 Beta release notes: native WebP image support. The format, which has been widely adopted across other major browsers for years, will now work in Safari without polyfills or workarounds.
WebP's appeal is straightforward: it delivers both lossless and lossy compression similar to JPEG but at noticeably smaller file sizes. That efficiency is exactly why CSS-Tricks itself uses WebP, relying on Jetpack's Site Accelerator to serve optimized versions of uploaded images to capable browsers. Jeremy Wagner has documented the ins and outs of using WebP, particularly in WordPress contexts.
Once Safari 14 ships, cross-browser support for WebP will be effectively universal—Internet Explorer's lack of support being the lone holdout. The compatibility data below, sourced from Caniuse, shows version-level support across desktop and mobile platforms.
Desktop Browser Support
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 32 | 65 | No | 18 | 16.0 |
Mobile and Tablet Support
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 151 | 153 | 4.2-4.3 | 14.0-14.4 |
Even with broad support on the horizon, it remains prudent to define fallbacks using the <picture> element for older browsers or edge cases:
<picture>
<source type="image/webp">
<source type="image/jpeg">
<img src="img/cat.jpg" alt="Alt Text!">
</picture>More Than Just Images in Safari 14
WebP isn't the only addition worth noting in the Safari 14 release. The update brings several CSS enhancements that developers have been anticipating, including the :is() and :where() pseudo-class functions. Jen Simmons highlighted additional key features in the release notes, such as:
- Derived
<img>aspect ratios from size attributes - Removal of Flash support
- Introduction of Safari Web Extensions
- Webpage Translation in beta
The full release notes are available directly from Apple's developer documentation. For those tracking browser capabilities, the addition of WebP marks a major milestone in image optimization across the web platform.
