v145 · Web APIs · Conditional Loader

Conditional JXL loader

Probe the browser for image/jxl support via a 1-byte test decode, then dynamically build a <picture> source set that prefers JXL when available. Measures decode time and reports back.

probe

Probing image/jxl support…

no image loaded

—

code

// Probe by attempting to decode a 1x1 JXL blob.
async function supportsJXL() {
  const tiny = base64ToBlob('AAAADGpYTCAGAQEAAH...', 'image/jxl');
  try { await createImageBitmap(tiny); return true; }
  catch { return false; }
}

// Build a <picture> — JXL first, then WebP, then JPEG.
<picture>
  <source type="image/jxl" srcset="hero.jxl">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="">
</picture>

see also