Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyYes, using WebP and AVIF image formats can significantly improve your web performance. These formats are more efficient than traditional formats like JPEG and PNG, as they provide superior compression and quality characteristics.
WebP, developed by Google, is a modern image format that provides superior lossless and lossy compression for images on the web. It can be 25-34% smaller than comparable JPEG images while maintaining the same quality.
AVIF, on the other hand, is a more recent format developed by the Alliance for Open Media. It offers significant file size reduction for images compared to JPEG or WebP and is starting to gain browser support.
However, not all browsers support these formats yet. As of now, WebP is supported in all major browsers except for Safari, and AVIF is supported in Chrome and Opera.
To ensure all users can view your images, you should use the picture element to offer multiple formats. Here's an example:
In this code, the browser will try to load the AVIF image first. If it can't (because it doesn't support AVIF), it will try the WebP image. If it can't load that (because it doesn't support WebP), it will fall back to the JPEG image.
Should I prioritize using WebP and AVIF image formats for web performance?
I analyzed my website with Lighthouse in Chrome DevTools, and it recommended using WebP or AVIF formats for images. Given that caniuse.com indicates broad browser support for these formats, including Safari, are there any downsides or reasons to avoid using them? Also, are there HTML techniques to ensure compatibility across browsers?
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replyYes, using WebP and AVIF image formats can significantly improve your web performance. These formats are more efficient than traditional formats like JPEG and PNG, as they provide superior compression and quality characteristics. WebP, developed by Google, is a modern image format that provides superior lossless and lossy compression for images on the web. It can be 25-34% smaller than comparable JPEG images while maintaining the same quality.
AVIF, on the other hand, is a more recent format developed by the Alliance for Open Media. It offers significant file size reduction for images compared to JPEG or WebP and is starting to gain browser support.
However, not all browsers support these formats yet. As of now, WebP is supported in all major browsers except for Safari, and AVIF is supported in Chrome and Opera.
To ensure all users can view your images, you should use the picture element to offer multiple formats. Here's an example:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="Description of image">
</picture>
In this code, the browser will try to load the AVIF image first. If it can't (because it doesn't support AVIF), it will try the WebP image. If it can't load that (because it doesn't support WebP), it will fall back to the JPEG image.