v145 · Imaging · Media · demo

Picture Element Builder

Build a <picture> element with the right format priority chain for your users. Detects which formats the current browser supports, lets you reorder and toggle sources, and generates the HTML — with a live verdict showing which source this browser would actually pick.

Chrome 145 flag required for JXL: enable chrome://flags/#enable-jxl-image-format to test JXL decoding. The builder works regardless — unsupported formats still appear in the chain; the browser simply skips them.

Order matters: the browser picks the first <source> it can decode. Put your best modern format first, JPEG last as a universal fallback.

Watch format support auto-detect below · use ↑↓ to reorder · toggle formats on/off · copy the generated HTML

Source priority chain — reorder with ↑↓ buttons

This browser would load: detecting…

Generated <picture> HTML

<!-- detecting formats… -->

/* Recommended JXL-first fallback chain */
<picture>
  <!-- JXL: best compression, HDR, lossless, progressive — Chrome 145+ (flag) -->
  <source srcset="image.jxl" type="image/jxl">
  <!-- AVIF: HDR, alpha, animation — Chrome 85+, Safari 16.1+ -->
  <source srcset="image.avif" type="image/avif">
  <!-- WebP: solid compression — Chrome 32+, Firefox 65+, Safari 14+ -->
  <source srcset="image.webp" type="image/webp">
  <!-- JPEG: universal fallback — all browsers -->
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

/* Server-side detection via Accept header: */
/* Accept: image/avif,image/webp,image/jxl,image/* */

see also