Recommended Free Tools
Use HTML’s <picture> element to offer JPEG XL first and keep a widely supported image in the contained <img> as a fallback. The browser can skip a source whose declared type it does not support, so visitors with older or incompatible browsers still get an image.
Use a picture element with an image fallback
Declare JPEG XL with the MIME type image/jxl and a .jxl file. Keep the fallback in the final <img> element; its src is what browsers use when none of the listed sources is suitable. The WHATWG HTML Living Standard defines how picture sources are selected.
As an Amazon Associate I earn from qualifying purchases.
<picture>
<source srcset="photo.jxl" type="image/jxl">
<img src="photo.jpg" width="1200" height="800" alt="Describe the image">
</picture>Replace the example filenames, dimensions, and alternative text with values that match the actual image and page. The type declaration tells a browser whether a source format is supported; it does not guarantee that every browser version supports JPEG XL. If JPEG is not the right fallback for the image, choose another conventional format appropriate to its content.
Free tools Windows power users keep installed
One-click scans. No signup required.
Offer more than one modern format
To provide several candidates, put them in preference order and leave the fallback image last. A browser can skip a source type it does not support and continue to the next option.
<picture>
<source srcset="photo.jxl" type="image/jxl">
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" width="1200" height="800" alt="Describe the image">
</picture>For responsive images, provide appropriate width candidates in each source’s srcset and a sizes value that describes the image’s rendered size. These inputs help the browser select a candidate for the layout and display conditions; they are separate from the format-support check. See MDN’s picture element reference for the element’s source-selection behavior.
Check browser support before relying on JPEG XL
JPEG XL is not a universal baseline. Support listings are changing and do not fully agree on browser release status. MDN’s image-format guide, modified September 22, 2026, lists Safari 17 and later, Chrome 145 and later behind the #enable-jxl-image-format flag, and Firefox preview releases. It also notes that Safari can render a JPEG XL image after it has downloaded completely but does not support progressive download. See MDN’s image file type and format guide.
Compatibility snapshots accessed October 7, 2026 show different release labels: Can I Use lists Chrome support in versions 155–157, partial Safari support from version 17, and Firefox support in versions 158–160; the MDN compatibility-data snapshot lists Chrome 155, Safari 17 with animated images unsupported, and Firefox as preview. These differences may reflect snapshot timing or different definitions of support. Check the versions your audience uses before changing delivery, and keep the fallback in place.
Choose a fallback that suits the image
- Photos: JPEG is a practical conventional fallback.
- Transparency or lossless diagrams, screenshots, and line art: PNG may preserve the image more appropriately than JPEG.
- Modern alternatives: WebP or AVIF can be strong general-purpose raster choices, but their fit depends on browser coverage and the image’s quality, file-size, and feature requirements.
JPEG XL supports lossy and lossless compression, progressive decoding, HDR, wide color gamuts, transparency, and animation, according to MDN’s format guide. Those capabilities do not make it the best choice for every asset: for example, Safari’s noted lack of progressive download may matter when an image should appear before its full file has arrived.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Compare formats with your own images
There is no universal file-size winner. In a Mozilla article published August 24, 2026, Jake Archibald’s selected examples found AVIF smaller than JPEG XL at particular lossy quality settings, while JPEG XL was smaller in selected lossless comparisons. For one sleeping-fox image, AVIF was 116 kB and JPEG XL 134 kB at SSIMULACRA 2 score 62.8; at score 80, the files were 227 kB and 264 kB, respectively. In a lossless comparison of that same sample, AVIF was 1.76 MB, JPEG XL 1.45 MB, and WebP 1.55 MB. These are results for named sample assets and encoding settings, not predictions for a site’s image library.
Archibald’s Interop dashboard screenshot example also illustrates why content matters: at SSIMULACRA 2 score 78, AVIF was 11.6 kB and JPEG XL 23.8 kB; in the lossless comparison, AVIF was 164 kB and JPEG XL 92 kB. His practical guidance is to “test with a representative set of images for your site, at a quality that works best for your users, and remember to optimise for high density.” Read the Mozilla Hacks comparison.
When evaluating whether to add another format, compare the same source images at a visual quality threshold you find acceptable, then consider the resulting file sizes, progressive display needs, transparency, animation, HDR or color requirements, browser coverage, and the work of generating and maintaining variants. At site scale, automated image conversion and delivery can reduce manual asset handling, but the HTML fallback pattern remains useful regardless of how files are produced.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick Recap
Best Value
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.
