v145 · JPEG XL · Detection

Format Support Detector

Detect whether the current browser can decode image/jxl. Uses a minimal JXL probe image to test support, and shows the <picture> pattern for graceful fallback.

Enable JPEG XL support in Chrome 145 via chrome://flags/#enable-jxl-image-format.

Format Browser support Best use
image/jxl Chrome 145+ (flag), Safari 17+, Firefox 128+ Lossless, HDR, progressive, archival
image/avif Chrome 85+, Firefox 93+, Safari 16+ Lossy compression, film photography
image/webp Chrome 23+, Firefox 65+, Safari 14+ General web images, animations
image/jpeg Universal Legacy photos, maximum compatibility

detection pattern

// Probe with a 1×1 white pixel JXL (bare codestream, ~32 bytes)
// This is the standard feature-detection data URI
const JXL_PROBE = "data:image/jxl;base64," +
  "/woIAAAABhc=";  // minimal valid JXL codestream

function supportsJXL() {
  return new Promise(resolve => {
    const img = new Image();
    img.onload  = () => resolve(img.width === 1);
    img.onerror = () => resolve(false);
    img.src = JXL_PROBE;
  });
}

// HTML pattern with <picture> fallback
// <picture>
//   <source type="image/jxl" srcset="photo.jxl">
//   <source type="image/avif" srcset="photo.avif">
//   <img src="photo.jpg" alt="Photo" width="800" height="600">
// </picture>

see also