Only a couple months ago I was pointing out the irony of Safari not supporting WebP image format and its impact on Apple homepage loading speed. Fast forward to WWDC 2020 and Apple announces Safari 14 Beta version with WebP image format support.

WebP image format benefits

If you have not heard about WebP image format, I will briefly explain why it is a big deal. Google has created WebP as the next generation image format for the web using state of the art compression techniques to provide the best ratio of image size and perceived quality. There have been other attempts to create next generations formats like JPEG 2000, but only WebP has reached mass adoption among browser vendors. Apple Safari browser was one of the last holdouts not supporting WebP format.

WebP significantly reduces image size and this leads to faster webpage loading times. You can evaluate how much savings your website would be getting by switching to WebP images with tools like Google Lighthouse.

How to detect WebP format support?

If you are detecting WebP image support based on browser user agent, it is time to switch to feature detection. Otherwise your website visitors using Safari 14 will not get the optimized WebP images.

Detect WebP support in JavaScript

function isWebPSupported() {
    return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
}

Detect WebP image support in HTML

Read more about reducing website load time by serving images in the next generation file formats.

<picture>
    <source srcset="windflower.webp" type="image/webp">
    <img src="windflower.jpg" width="400" alt="Sub optimal image">
</picture>