No matter how much unnecessary css/js or general load time I shave off my website, Google Audits always penalises me massively for not using "next-gen formats" such as JPEG2000, JPEGXR and WebP in my pages.

So, fine, I thought, I'll add support for those. But both JPEG2000 and JPEGXR are barely supported (respectively by Safari and IE only) while Webp is supported by everything BUT Safari.

So what's the solution here? Am I supposed to have a bunch of media queries for specific edge cases to make this work on every browser? Surely Google wouldn't ask people to do this unless support was at a point where it was actually feasible.

I'm open to suggestions, any way to easily target all browsers that support WebP?

  • Despite what Google says there should be no rush to use these formats until browser support is universal. – Stephen Ostermiller Jun 18 '19 at 23:56

You can use the picture element to allow the user agent to choose which image it prefers to display.

  <source type="image/webp" srcset="image.webp">
  <source type="image/jp2" srcset="image.jp2">
  <img src="image.png" alt="">

This will automatically use the webp image where the user agent supports webp, then the jp2 where jp2 is supported but not webp, and finally the png where neither are supported. Only one request is made, so the original image in the src attribute is only requested when all the source tags are incompatible.

The picture element is supported in all browsers by at least 2016, and downgrades to just the img element where not supported, which likely means the browser wouldn’t have supported any of the alternative types anyway.

| improve this answer | |
  • This is an easy solution for HTML, but is there one for CSS? A lot of my images are backgrounds.. – Eight Jun 19 '19 at 8:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.