为何Google Lighthouse推荐Chrome及多数浏览器不支持的图片格式？

Great question—this is a super common gotcha with Lighthouse's image optimization suggestions! Let's break down why this happens and how to interpret those recommendations correctly:

• Lighthouse cares most about compression efficiency first
  JPEG 2000 and JPEG XR deliver way better compression at equivalent image quality compared to traditional JPEG/PNG. Lighthouse's core goal is to flag opportunities to reduce page weight and improve load times, so it highlights these formats as top-tier options from a performance standpoint.

• It’s advocating for responsive image patterns, not exclusive use
  The key here is that Lighthouse doesn't expect you to replace all your images with JPEG 2000/JPEG XR outright. Instead, it wants you to use the <picture> element to serve these efficient formats to browsers that do support them, while providing a fallback (like standard JPEG) for browsers that don't. This way you get the performance boost where possible, without breaking compatibility.

  Here's a quick example of how to implement this:

  <picture>
    <source srcset="image.jpx" type="image/jpx"> <!-- JPEG 2000 -->
    <source srcset="image.jxr" type="image/vnd.ms-photo"> <!-- JPEG XR -->
    <img src="image.jpg" alt="Descriptive alt text"> <!-- Fallback for all browsers -->
  </picture>
  

• Lighthouse doesn’t always explicitly call out the fallback requirement
  The audit focuses on the performance gain potential, so it might not spell out that you need to pair these formats with compatible fallbacks. That's where cross-referencing with caniuse makes sense—you get the best of both worlds: Lighthouse's performance guidance, plus caniuse's compatibility context to build a robust implementation.

内容的提问来源于stack exchange，提问作者Millhorn