JPEG XL: The Future Image Format (Adoption Guide)

JPEG XL (JXL) represents the most ambitious attempt to create a universal image format. With superior compression, HDR support, and the unique ability to losslessly transcode existing JPEGs, it promises to be the future of web images—once browser support catches up.

What is JPEG XL?

JPEG XL is a royalty-free image format developed by the Joint Photographic Experts Group (the same organization behind JPEG). It was standardized in 2022 with the goal of replacing both JPEG and PNG.

Key Features

Feature	JPEG XL	AVIF	WebP	JPEG
Lossy compression	Excellent	Excellent	Good	Good
Lossless compression	Excellent	Good	Good	No
Transparency	Yes	Yes	Yes	No
Animation	Yes	Yes	Yes	No
HDR support	Native	Yes	No	No
Progressive decode	Excellent	Limited	No	Yes
JPEG recompression	Lossless	No	No	N/A
Max dimensions	1 billion px	65535 px	16383 px	65535 px

Compression Comparison

Testing with a typical photograph (24MP, 6000×4000):

Format	Quality	File Size	vs JPEG
JPEG	80%	2.4 MB	baseline
WebP	80%	1.8 MB	-25%
AVIF	65%	1.2 MB	-50%
JPEG XL	80%	1.0 MB	-58%

Browser Support Status (2026)

Current Support

Browser	Status	Notes
Safari	Supported	17+ (iOS 17+, macOS Sonoma+)
Firefox	Behind flag	Enable in about:config
Chrome	Removed	Was behind flag, removed in v110
Edge	No support	Following Chrome

The Chrome Situation

Google removed JPEG XL support from Chrome in February 2023, citing insufficient ecosystem interest. This decision remains controversial, with ongoing community advocacy for reinstatement.

Checking Support

async function supportsJxl() {
  const img = new Image();

  return new Promise((resolve) => {
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    img.src = 'data:image/jxl;base64,/woIELASCAgQAFwASxLFgkWAHL0xqnCBCV0qDp901Te/5QM=';
  });
}

Why JPEG XL Matters

1. Lossless JPEG Transcoding

JPEG XL can convert existing JPEGs with zero quality loss and ~20% size reduction. This is unique to JPEG XL and valuable for archiving existing photo libraries.

2. Superior Progressive Loading

JPEG XL’s progressive decoding provides a usable preview at just 10% loaded, with quality improving smoothly as more data arrives.

3. HDR and Wide Gamut

Native support for HDR10, HLG, PQ transfer functions and Display P3, Rec. 2020 color spaces.

Implementation Strategies

Progressive Enhancement

<picture>
  <source srcset="image.jxl" type="image/jxl">
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

Using Image CDNs

CDNs like Sirv handle format negotiation automatically:

<img src="https://your-site.sirv.com/photos/sunset.jpg?format=optimal">

When browsers support JPEG XL, CDNs can serve it automatically without code changes.

Creating JPEG XL Images

Command-Line Tools

Install libjxl and use cjxl for encoding:

cjxl input.png output.jxl -q 80
cjxl input.jpg output.jxl --lossless_jpeg=1

Quality Guidelines

Content Type	Quality	Notes
Photographs	75-85	Good balance
Graphics	85-95	Preserve details
Screenshots	90-100	Near-lossless
Archival	100	Lossless

Migration Strategy

Phase 1: Preparation (Now)

Generate JXL alongside other formats in your build pipeline.

Phase 2: Conditional Serving (Now)

Use <picture> with JXL as first source for Safari users.

Phase 3: Primary Format (Future)

When Chrome adds support, consider making JXL the primary format.

Conclusion

JPEG XL is technically superior to current formats with 60% smaller files than JPEG, lossless JPEG transcoding, and native HDR support.

The main barrier is browser support. Safari’s adoption is promising, but Chrome’s removal remains a setback. For now:

1. Generate JXL alongside other formats
2. Serve conditionally using <picture>
3. Monitor browser support for changes
4. Use CDNs like Sirv that can add JXL support automatically