v145 · JPEG XL · Format Comparison

Format Showcase

Explore JPEG XL versus JPEG side-by-side using the <picture> element. The browser selects image/jxl when supported; otherwise it falls back to the JPEG source.

Enable JPEG XL in Chrome 145 via chrome://flags/#enable-jxl-image-format. Without the flag, both panels will display the JPEG fallback.

image/jxl …
Gradient colour sample
  • MIME typeimage/jxl
  • Losslessyes
  • Progressiveyes
  • HDR / wide gamutyes
  • Typical savings vs JPEG~50% lossy, ~35% lossless
  • Alpha channelyes
image/jpeg universal
Gradient colour sample
  • MIME typeimage/jpeg
  • Losslessno
  • Progressivebaseline only
  • HDR / wide gamutlimited
  • Savings vs PNG~30–70% lossy
  • Alpha channelno

usage pattern

<!-- Serve JXL to supporting browsers, JPEG everywhere else -->
<picture>
  <source type="image/jxl" srcset="hero.jxl 1x, hero@2x.jxl 2x">
  <source type="image/avif" srcset="hero.avif 1x, hero@2x.avif 2x">
  <img src="hero.jpg" srcset="hero@2x.jpg 2x"
       alt="Hero image" width="1200" height="630">
</picture>

<!-- Server: set Content-Type header for .jxl files -->
<!-- Content-Type: image/jxl -->

<!-- CSS background (Chrome 145+ with flag or later) -->
<style>
.hero {
  background-image: url("hero.jxl");
  /* Provide JPEG fallback for non-supporting browsers */
}
@supports not (background-image: url("a.jxl")) {
  .hero { background-image: url("hero.jpg"); }
}
</style>

see also

scenario focus

Select a scenario to focus its rendered example and summary.