Browser compatibility
| Format | Chrome | FireFox | Edge | Safari | IE11 |
|---|---|---|---|---|---|
| WebP | Y | Y | Y | N | N |
| AVIF | Y | Y | N | N | N |
| Jpeg 2000 | N | N | N | Y | N |
| Jpeg XR | N | N | N | N | Y |
Fallback
Based on the majority of the browsers support WebP format, we could default to use webp format for all images and set up fallback for universal Jpeg format.
HTML ![]()
element fallback
<img alt="image description"
src="image.webp"
onerror="this.src=image.jpg" />
CSS background image fallback
/* default fallback when 'image-set()' is not supported */ background-image: url('image.jpg'); /* default to AVIF and if not supported, try WebP, etc.. */ background-image: image-set( "image.avif" type("image/avif"), "image.webp" type("image/webp"), "image.jp2" type("image/jp2"), "image.jxr" type("image/jxr"), "image.jpg" type("image/jpeg") );