From 6fdc1423af82022e65e7298259c5d81c5b63f499 Mon Sep 17 00:00:00 2001 From: Joost de Valk Date: Mon, 19 Oct 2026 08:08:19 +0200 Subject: [PATCH] fix(image-optimization): cover JPEG XL now that Chrome and Firefox ship it Chrome 155 (2026-10-06) and Firefox 158 (2026-10-13) enabled JPEG XL, joining Safari 17+. Edge has not, so webstatus.dev still reports it as limited availability. The page now recommends it as an extra source rather than a replacement for AVIF, and notes the Vary: Accept requirement for servers that negotiate on Accept. Co-Authored-By: Claude Opus 5.5 --- src/content/changelog/2026-10-19-jpeg-xl.md | 8 ++++++++ src/content/spec/performance/image-optimization.md | 4 +++- 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 src/content/changelog/2026-10-19-jpeg-xl.md diff --git a/src/content/changelog/2026-10-19-jpeg-xl.md b/src/content/changelog/2026-10-19-jpeg-xl.md new file mode 100644 index 00000000..4b12281e --- /dev/null +++ b/src/content/changelog/2026-10-19-jpeg-xl.md @@ -0,0 +1,8 @@ +--- +title: "Image optimisation: JPEG XL now ships in Chrome and Firefox" +date: "2026-10-19" +type: changed +relatedSlugs: [image-optimization] +--- + +The [image optimisation page](/spec/performance/image-optimization/) now covers JPEG XL, which Chrome 155 and Firefox 158 enabled in October 2026, joining Safari. It is not yet Baseline because Edge lacks it, so the page recommends offering it as an extra `` source next to AVIF rather than replacing AVIF. diff --git a/src/content/spec/performance/image-optimization.md b/src/content/spec/performance/image-optimization.md index 8daa3171..070889c2 100644 --- a/src/content/spec/performance/image-optimization.md +++ b/src/content/spec/performance/image-optimization.md @@ -7,7 +7,7 @@ status: required order: 20 appliesTo: [all] relatedSlugs: [lazy-loading, core-web-vitals, preload-prefetch-preconnect] -updated: "2026-08-08T00:00:00.000Z" +updated: "2026-10-19T00:00:00.000Z" sources: - title: "HTML Standard — 4.8.4 Images" url: "https://html.spec.whatwg.org/multipage/images.html" @@ -56,6 +56,8 @@ Keep the `` chain anyway. "Widely available" describes browser versions ``` +**Treat JPEG XL as an extra source, not a replacement.** [Chrome 155](https://developer.chrome.com/blog/jpeg-xl-in-chrome) (6 October 2026) and [Firefox 158](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/158) (13 October 2026) turned on JPEG XL decoding, joining Safari, which has supported it since version 17. Shipping in all three engines is not the same as Baseline, though: Edge has not enabled it, so JPEG XL is still limited availability. Nor is it simply a better AVIF. Its strengths lie elsewhere: it can recompress an existing JPEG losslessly into a smaller file and rebuild the original exactly, it decodes progressively, and it holds up at high fidelity. For an ordinary lossy photo at web quality, AVIF is often still the smaller file, so compare the two on your own images. To offer it, add a `` to the chain. The browser takes the first type it supports, so put the sources in your order of preference. If you negotiate format on the `Accept` request header instead, Firefox now lists `image/jxl` there, and the response needs [`Vary: Accept`](/spec/performance/vary/) so caches keep the variants apart. + **Serve responsive sizes.** Generate the same image at several widths and let `srcset` plus `sizes` pick the right one. A 4000px image in a 400px slot wastes ~99% of the bytes. **Always set `width` and `height`.** The browser computes the aspect ratio and reserves the slot, preventing CLS when the image loads.