JPEG XL Progressive Images: A Guide for the Web

JPEG XL can encode images for progressive decoding, so a supported browser may show an early, low-detail rendering while the rest of the image downloads. That does not mean every browser will do so: current support is uneven, and Safari supports JPEG XL but does not progressively download it. For production, offer JPEG XL alongside a fallback with <picture>, then compare formats on your own images rather than assuming JPEG XL is always smaller or faster.

What does progressive JPEG XL mean for a web reader?

JPEG XL, standardized as ISO/IEC 18181, is a raster image format that supports lossy and lossless compression, progressive decoding, HDR, transparency, animation, layers, and thumbnails. It is designed for web delivery as well as professional photography. Its reference implementation is free, open-source, and royalty-free, according to the JPEG Committee’s JPEG XL overview.

#	Preview	Product	Price
1		Giant Giant: A Picture Book	$18.99	Buy on Amazon

As an Amazon Associate I earn from qualifying purchases.

With progressive coding, a decoder can produce successively more complete renderings as image data arrives. In a browser that implements progressive rendering for the particular file, the visitor may see an initial rough preview before the download finishes, with detail improving as more bytes arrive. It is not a promise that the page loads faster or that every JPEG XL file will visibly refine in every browser.

JPEG XL can also losslessly recompress existing JPEG images in a way that permits reconstruction of the original JPEG. That is a distinct capability from progressive display: it may be useful when preserving the original JPEG data matters, but it does not guarantee an early preview in a browser.

#1 Best Overall

Giant Giant: A Picture Book

$18.99

Buy on Amazon

What is the browser-support caveat, especially for progressive loading?

Browser support and progressive rendering are separate questions. The MDN support summary accessed on October 3, 2026, reports Safari 17 and later support, Chrome 145 and later support behind the #enable-jxl-image-format flag, and Firefox support in preview releases. MDN also says Safari does not progressively download JPEG XL files. These version and release details can change; verify current browser support before relying on JPEG XL in a deployment. See MDN’s image format guide.

WebKit’s 2023 Safari 17 article describes the benefit of progressive loading and demonstrates JPEG XL with a JPEG fallback. Its statement that the web can offer several file options and let the browser choose is useful as a delivery principle, not proof that Safari progressively renders the chosen file. Mozilla’s August 2026 article describes progressive rendering in Firefox Nightly; preview or Nightly behavior should not be treated as universal stable-browser behavior. See WebKit’s Safari 17 features article and Mozilla Hacks’ August 2026 JPEG XL article.

A WebKit Bugzilla report filed in 2024 records a reporter’s observation that a sample made with cjxl input.jpeg output.jxl --progressive_dc=1 did not progressively decode in the Safari context they tested. The report also notes that not all files are necessarily progressively decodable. This is a dated report about a particular sample and test context, not a general rule for all JPEG XL files or a current compatibility table. See WebKit Bugzilla issue 272350.

How should a website serve JPEG XL while preserving compatibility?

Use a <picture> element with a JPEG XL source and a fallback image. Browsers that support the declared source type can select it; browsers that do not can use the <img> source. MDN also suggests alternatives such as AVIF or WebP where appropriate. For a deployment, provide meaningful alternative text and explicit dimensions that match the image’s intrinsic aspect ratio.

<picture>
  <source srcset="/images/hero.jxl" type="image/jxl">
  <img src="/images/hero.jpg" alt="A hiker crossing a rocky ridge" width="1600" height="900">
</picture>

The alt text above is only an example; describe the actual content and purpose of your image. MDN lists the JPEG XL MIME type as image/jxl and the file extension as .jxl. Ensure the server returns the correct content type for the JPEG XL file. Browser selection through <picture> provides a fallback path; it does not make the fallback unnecessary for users on unsupported browsers.

Check the result in the browsers you support

• Confirm that the browser recognizes JPEG XL and selects the expected source rather than the fallback.
• Test progressive behavior separately from format support. A browser may display JPEG XL only after the full file has arrived.
• Test the actual encoded asset, not just a different sample image or an encoder setting. Progressive behavior depends on both implementation and file.
• Keep the fallback available until your audience’s browser support and your own deployment requirements justify changing it.

How should writers compare JPEG XL and AVIF for web use?

Compare results at comparable visual quality using images representative of your site. Include photographs, screenshots, and images with sharp edges or flat areas if those appear in your content. Consider browser support and progressive-rendering behavior, lossy size at an acceptable quality level, lossless size and fidelity requirements, and encoding and decoding speed. The JPEG Committee notes that image formats involve tradeoffs among fidelity, encoding/decoding speed, and compression ratio.

Mozilla’s August 2026 article provides selected examples, not universal benchmarks. In its two lossy examples, AVIF files are smaller; in its cited lossless examples, JPEG XL files are smaller. The measurements below retain the images and quality scores described by Mozilla:

These examples show why a single “best format” claim is unreliable: the result changes with image content, quality target, and lossless versus lossy encoding. Mozilla characterizes AVIF as a strong option for web-quality photographic images and images combining sharp edges with flat areas, while highlighting JPEG XL for lossless imagery, progressive rendering, and lossless JPEG recompression. Measure your own candidates at settings that meet your visual and fidelity requirements.

Or skip the browser setup

If you need screenshots of pages to inspect how your assets and fallbacks appear, ScreenshotNeo is a website screenshot API and MCP server for developers. Its one-call API can return a screenshot or PDF; it is not a substitute for testing actual browser support and progressive decoding across your audience’s browsers.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for request options. It removes cookie/consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month, with no card required.

Frequently Asked Questions

What MIME type should a server use for JPEG XL?

Use image/jxl; the file extension is .jxl.

Does a progressive JPEG XL file guarantee a visible preview in Safari?

No. MDN says Safari does not progressively download JPEG XL, even though it supports the format.

Quick Recap

Bestseller No. 1

Giant Giant: A Picture Book

$18.99

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.