[{"data":1,"prerenderedAt":1207},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks":3,"surroundings:\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks":1198},{"id":4,"title":5,"body":6,"description":1177,"extension":1178,"meta":1179,"navigation":1191,"path":1192,"seo":1193,"stem":1196,"__hash__":1197},"content\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks\u002Findex.md","JPEG XL Support and Fallbacks",{"type":7,"value":8,"toc":1159},"minimark",[9,14,29,46,214,219,248,252,258,264,270,276,364,368,373,450,454,626,633,637,648,779,783,790,934,938,956,960,966,970,973,977,980,984,1010,1014,1020,1026,1036,1042,1046,1058,1067,1076,1085,1101,1117,1121,1144,1149,1152,1155],[10,11,13],"h1",{"id":12},"jpeg-xl-support-and-fallbacks-should-you-serve-it-today","JPEG XL Support and Fallbacks: Should You Serve It Today?",[15,16,17,18,23,24,28],"p",{},"This guide extends ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002F","Serving AVIF and WebP with Fallbacks",", part of ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002F","Image & Media Optimization",". JPEG XL (JXL) is a modern image format with attractive properties: excellent quality per byte at high fidelity, progressive decoding, wide-gamut and HDR support, and a unique feature — lossless recompression of existing JPEGs, typically about 20% smaller with bit-exact reconstruction of the original file.",[15,30,31,32,36,37,41,42,45],{},"Its weakness is browser support. Safari supports JPEG XL; Chromium removed its experimental support years ago and its future there has been debated; Firefox support has existed behind flags. That makes JXL a format you can add ",[33,34,35],"em",{},"safely"," — using ",[38,39,40],"code",{},"\u003Cpicture>"," or ",[38,43,44],{},"Accept"," negotiation so only supporting browsers receive it — but not one you can rely on as a primary format. The question is whether the gains for supporting browsers justify the extra pipeline and storage.",[15,47,48],{},[49,50,56,57,56,64,56,68,56,71,56,80,56,86,56,92,56,99,56,103,56,108,56,111,56,115,56,118,56,122,56,126,56,130,56,135,56,139,56,143,56,146,56,148,56,150,56,153,56,157,56,159,56,162,56,164,56,167,56,169,56,172,56,175,56,179,56,181,56,184,56,186,56,189,56,191,56,194,56,197,56,201,56,203,56,206,56,208,56,210,56,212,56],"svg",{"viewBox":51,"width":52,"role":53,"ariaLabel":54,"style":55},"0 0 760 228","100%","img","Comparison of JPEG XL, AVIF and WebP across browser support, high-fidelity efficiency, progressive decoding and JPEG recompression.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[58,59],"rect",{"className":60,"x":62,"y":62,"width":52,"height":52,"fill":63},[61],"svg-canvas","0","#ffffff",[65,66,67],"title",{},"JPEG XL vs AVIF vs WebP",[69,70,54],"desc",{},[58,72],{"x":73,"y":73,"width":74,"height":75,"rx":76,"fill":77,"stroke":78,"style":79},"1","758","226","10","none","currentColor","stroke-opacity:0.18",[81,82,67],"text",{"x":83,"y":84,"fill":78,"style":85},"28.0","34.0","font-size:16px;font-weight:700",[58,87],{"x":83,"y":88,"width":89,"height":90,"rx":62,"fill":78,"stroke":78,"style":91},"56.0","197.9","30.0","fill-opacity:0.06;stroke-opacity:0.4",[81,93,98],{"x":94,"y":95,"fill":78,"style":96,"textAnchor":97},"38.0","75.5","font-size:12.5px;font-weight:700","start","Aspect",[58,100],{"x":101,"y":88,"width":102,"height":90,"rx":62,"fill":78,"stroke":78,"style":91},"225.9","168.7",[81,104,107],{"x":105,"y":95,"fill":78,"style":96,"textAnchor":106},"310.2","middle","JPEG XL",[58,109],{"x":110,"y":88,"width":102,"height":90,"rx":62,"fill":78,"stroke":78,"style":91},"394.6",[81,112,114],{"x":113,"y":95,"fill":78,"style":96,"textAnchor":106},"478.9","AVIF",[58,116],{"x":117,"y":88,"width":102,"height":90,"rx":62,"fill":78,"stroke":78,"style":91},"563.3",[81,119,121],{"x":120,"y":95,"fill":78,"style":96,"textAnchor":106},"647.6","WebP",[58,123],{"x":83,"y":124,"width":89,"height":90,"rx":62,"fill":77,"stroke":78,"style":125},"86.0","stroke-opacity:0.35",[81,127,129],{"x":94,"y":128,"fill":78,"style":96,"textAnchor":97},"105.5","Browser support",[58,131],{"x":101,"y":124,"width":102,"height":90,"rx":62,"fill":132,"stroke":133,"style":134},"#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[81,136,138],{"x":105,"y":128,"fill":78,"style":137,"textAnchor":106},"font-size:12px","Safari mainly",[58,140],{"x":110,"y":124,"width":102,"height":90,"rx":62,"fill":141,"stroke":141,"style":142},"#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[81,144,145],{"x":113,"y":128,"fill":78,"style":137,"textAnchor":106},"all modern",[58,147],{"x":117,"y":124,"width":102,"height":90,"rx":62,"fill":141,"stroke":141,"style":142},[81,149,145],{"x":120,"y":128,"fill":78,"style":137,"textAnchor":106},[58,151],{"x":83,"y":152,"width":89,"height":90,"rx":62,"fill":77,"stroke":78,"style":125},"116.0",[81,154,156],{"x":94,"y":155,"fill":78,"style":96,"textAnchor":97},"135.5","High-fidelity efficiency",[58,158],{"x":101,"y":152,"width":102,"height":90,"rx":62,"fill":141,"stroke":141,"style":142},[81,160,161],{"x":105,"y":155,"fill":78,"style":137,"textAnchor":106},"excellent",[58,163],{"x":110,"y":152,"width":102,"height":90,"rx":62,"fill":141,"stroke":141,"style":142},[81,165,166],{"x":113,"y":155,"fill":78,"style":137,"textAnchor":106},"very good",[58,168],{"x":117,"y":152,"width":102,"height":90,"rx":62,"fill":78,"stroke":78,"style":91},[81,170,171],{"x":120,"y":155,"fill":78,"style":137,"textAnchor":106},"good",[58,173],{"x":83,"y":174,"width":89,"height":90,"rx":62,"fill":77,"stroke":78,"style":125},"146.0",[81,176,178],{"x":94,"y":177,"fill":78,"style":96,"textAnchor":97},"165.5","Progressive decoding",[58,180],{"x":101,"y":174,"width":102,"height":90,"rx":62,"fill":141,"stroke":141,"style":142},[81,182,183],{"x":105,"y":177,"fill":78,"style":137,"textAnchor":106},"yes",[58,185],{"x":110,"y":174,"width":102,"height":90,"rx":62,"fill":132,"stroke":133,"style":134},[81,187,188],{"x":113,"y":177,"fill":78,"style":137,"textAnchor":106},"limited",[58,190],{"x":117,"y":174,"width":102,"height":90,"rx":62,"fill":132,"stroke":133,"style":134},[81,192,193],{"x":120,"y":177,"fill":78,"style":137,"textAnchor":106},"no",[58,195],{"x":83,"y":196,"width":89,"height":90,"rx":62,"fill":77,"stroke":78,"style":125},"176.0",[81,198,200],{"x":94,"y":199,"fill":78,"style":96,"textAnchor":97},"195.5","Lossless JPEG recompression",[58,202],{"x":101,"y":196,"width":102,"height":90,"rx":62,"fill":141,"stroke":141,"style":142},[81,204,205],{"x":105,"y":199,"fill":78,"style":137,"textAnchor":106},"~20% smaller, exact",[58,207],{"x":110,"y":196,"width":102,"height":90,"rx":62,"fill":132,"stroke":133,"style":134},[81,209,193],{"x":113,"y":199,"fill":78,"style":137,"textAnchor":106},[58,211],{"x":117,"y":196,"width":102,"height":90,"rx":62,"fill":132,"stroke":133,"style":134},[81,213,193],{"x":120,"y":199,"fill":78,"style":137,"textAnchor":106},[215,216,218],"h2",{"id":217},"rapid-diagnosis","Rapid Diagnosis",[220,221,222,230,236,242],"ul",{},[223,224,225,229],"li",{},[226,227,228],"strong",{},"Check your audience's browsers."," The share of Safari (macOS and iOS) traffic determines how many users could benefit.",[223,231,232,235],{},[226,233,234],{},"Check your image quality targets."," JXL's advantage is largest at high quality (photography, product detail); at aggressive compression AVIF is often competitive or better.",[223,237,238,241],{},[226,239,240],{},"Check whether you store original JPEGs."," Lossless recompression is a storage and bandwidth win for large JPEG archives.",[223,243,244,247],{},[226,245,246],{},"Check pipeline capacity."," Each additional format adds encode time and storage per variant.",[215,249,251],{"id":250},"root-cause-analysis-why-jxl-is-considered","Root Cause Analysis: Why JXL Is Considered",[15,253,254,257],{},[226,255,256],{},"1. High-fidelity photography."," Sites where image quality is the product (photography, art, real estate) pay heavily in bytes for high-quality images; JXL can reduce that substantially at the same quality.",[15,259,260,263],{},[226,261,262],{},"2. Large JPEG archives."," Lossless recompression saves bandwidth without any quality decision.",[15,265,266,269],{},[226,267,268],{},"3. Progressive rendering."," JXL can render a useful preview early from a partial download, improving perceived speed for large images.",[15,271,272,275],{},[226,273,274],{},"4. Uncertain support."," All of the above only applies to browsers that decode JXL, so the gain is proportional to that audience.",[15,277,278],{},[49,279,56,282,56,285,56,288,56,290,56,293,56,295,56,302,56,309,56,314,56,318,56,323,56,327,56,331,56,335,56,339,56,343,56,347,56,351,56,355,56,360,56],{"viewBox":280,"width":52,"role":53,"ariaLabel":281,"style":55},"0 0 760 225","Bar chart comparing file size for one high-quality product photo in JPEG, WebP, AVIF and JPEG XL at similar visual quality.",[58,283],{"className":284,"x":62,"y":62,"width":52,"height":52,"fill":63},[61],[65,286,287],{},"Bytes for a high-quality 1600px product photo",[69,289,281],{},[58,291],{"x":73,"y":73,"width":74,"height":292,"rx":76,"fill":77,"stroke":78,"style":79},"223",[81,294,287],{"x":83,"y":84,"fill":78,"style":85},[81,296,301],{"x":297,"y":298,"fill":78,"style":299,"textAnchor":300},"169.3","70.0","font-size:13px","end","JPEG (q85)",[58,303],{"x":304,"y":88,"width":305,"height":306,"rx":307,"fill":132,"stroke":133,"style":308},"181.3","486.7","19","3","fill-opacity:0.7;stroke-opacity:0.9",[81,310,313],{"x":311,"y":298,"fill":78,"style":312},"674.0","font-size:12px;font-weight:600","310KB",[81,315,317],{"x":297,"y":316,"fill":78,"style":299,"textAnchor":300},"101.0","WebP (q85)",[58,319],{"x":304,"y":320,"width":321,"height":306,"rx":307,"fill":141,"stroke":141,"style":322},"87.0","358.0","fill-opacity:0.55;stroke-opacity:0.9",[81,324,326],{"x":325,"y":316,"fill":78,"style":312},"545.3","228KB",[81,328,330],{"x":297,"y":329,"fill":78,"style":299,"textAnchor":300},"132.0","AVIF (q60)",[58,332],{"x":304,"y":333,"width":334,"height":306,"rx":307,"fill":141,"stroke":141,"style":322},"118.0","260.6",[81,336,338],{"x":337,"y":329,"fill":78,"style":312},"447.9","166KB",[81,340,342],{"x":297,"y":341,"fill":78,"style":299,"textAnchor":300},"163.0","JPEG XL (d1.0)",[58,344],{"x":304,"y":345,"width":346,"height":306,"rx":307,"fill":141,"stroke":141,"style":322},"149.0","248.1",[81,348,350],{"x":349,"y":341,"fill":78,"style":312},"435.4","158KB",[81,352,354],{"x":297,"y":353,"fill":78,"style":299,"textAnchor":300},"194.0","JXL lossless from JPEG",[58,356],{"x":304,"y":357,"width":358,"height":306,"rx":307,"fill":78,"stroke":78,"style":359},"180.0","392.5","fill-opacity:0.7;stroke-opacity:0.4",[81,361,363],{"x":362,"y":353,"fill":78,"style":312},"579.8","250KB",[215,365,367],{"id":366},"step-by-step-adding-jxl-safely","Step-by-Step: Adding JXL Safely",[369,370,372],"h3",{"id":371},"_1-encode-jxl-alongside-existing-formats","1. Encode JXL alongside existing formats",[374,375,380],"pre",{"className":376,"code":377,"language":378,"meta":379,"style":379},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","# Lossy JXL at high fidelity (distance 1.0 ≈ visually lossless).\ncjxl hero.png hero.jxl -d 1.0 -e 7\n# Lossless recompression of an existing JPEG (bit-exact, reversible).\ncjxl product.jpg product.jxl --lossless_jpeg=1\n# trade-off: higher effort (-e) improves compression but slows encoding; effort\n# 7 is a common balance for build pipelines.\n","bash","",[38,381,382,391,418,424,438,444],{"__ignoreMap":379},[383,384,387],"span",{"class":385,"line":386},"line",1,[383,388,390],{"class":389},"sjfSM","# Lossy JXL at high fidelity (distance 1.0 ≈ visually lossless).\n",[383,392,394,398,402,405,409,412,415],{"class":385,"line":393},2,[383,395,397],{"class":396},"sQw3B","cjxl",[383,399,401],{"class":400},"sZ8jY"," hero.png",[383,403,404],{"class":400}," hero.jxl",[383,406,408],{"class":407},"sPXB4"," -d",[383,410,411],{"class":407}," 1.0",[383,413,414],{"class":407}," -e",[383,416,417],{"class":407}," 7\n",[383,419,421],{"class":385,"line":420},3,[383,422,423],{"class":389},"# Lossless recompression of an existing JPEG (bit-exact, reversible).\n",[383,425,427,429,432,435],{"class":385,"line":426},4,[383,428,397],{"class":396},[383,430,431],{"class":400}," product.jpg",[383,433,434],{"class":400}," product.jxl",[383,436,437],{"class":407}," --lossless_jpeg=1\n",[383,439,441],{"class":385,"line":440},5,[383,442,443],{"class":389},"# trade-off: higher effort (-e) improves compression but slows encoding; effort\n",[383,445,447],{"class":385,"line":446},6,[383,448,449],{"class":389},"# 7 is a common balance for build pipelines.\n",[369,451,453],{"id":452},"_2-serve-with-picture-jxl-first","2. Serve with picture, JXL first",[374,455,459],{"className":456,"code":457,"language":458,"meta":379,"style":379},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Cpicture>\n  \u003Csource type=\"image\u002Fjxl\" srcset=\"\u002Fimg\u002Fp42-800.jxl 800w, \u002Fimg\u002Fp42-1600.jxl 1600w\" sizes=\"(max-width: 700px) 100vw, 700px\">\n  \u003Csource type=\"image\u002Favif\" srcset=\"\u002Fimg\u002Fp42-800.avif 800w, \u002Fimg\u002Fp42-1600.avif 1600w\" sizes=\"(max-width: 700px) 100vw, 700px\">\n  \u003Csource type=\"image\u002Fwebp\" srcset=\"\u002Fimg\u002Fp42-800.webp 800w, \u002Fimg\u002Fp42-1600.webp 1600w\" sizes=\"(max-width: 700px) 100vw, 700px\">\n  \u003Cimg src=\"\u002Fimg\u002Fp42-1600.jpg\" width=\"1600\" height=\"1200\" alt=\"Leather boot, side view\">\n\u003C\u002Fpicture>\n\u003C!-- trade-off: every extra \u003Csource> adds HTML bytes for every image; on pages\n     with many images, Accept-header negotiation at a CDN keeps markup small. -->\n","html",[38,460,461,474,509,537,565,605,614,620],{"__ignoreMap":379},[383,462,463,467,471],{"class":385,"line":386},[383,464,466],{"class":465},"saISM","\u003C",[383,468,470],{"class":469},"sZBmE","picture",[383,472,473],{"class":465},">\n",[383,475,476,479,482,485,488,491,494,496,499,502,504,507],{"class":385,"line":393},[383,477,478],{"class":465},"  \u003C",[383,480,481],{"class":469},"source",[383,483,484],{"class":407}," type",[383,486,487],{"class":465},"=",[383,489,490],{"class":400},"\"image\u002Fjxl\"",[383,492,493],{"class":407}," srcset",[383,495,487],{"class":465},[383,497,498],{"class":400},"\"\u002Fimg\u002Fp42-800.jxl 800w, \u002Fimg\u002Fp42-1600.jxl 1600w\"",[383,500,501],{"class":407}," sizes",[383,503,487],{"class":465},[383,505,506],{"class":400},"\"(max-width: 700px) 100vw, 700px\"",[383,508,473],{"class":465},[383,510,511,513,515,517,519,522,524,526,529,531,533,535],{"class":385,"line":420},[383,512,478],{"class":465},[383,514,481],{"class":469},[383,516,484],{"class":407},[383,518,487],{"class":465},[383,520,521],{"class":400},"\"image\u002Favif\"",[383,523,493],{"class":407},[383,525,487],{"class":465},[383,527,528],{"class":400},"\"\u002Fimg\u002Fp42-800.avif 800w, \u002Fimg\u002Fp42-1600.avif 1600w\"",[383,530,501],{"class":407},[383,532,487],{"class":465},[383,534,506],{"class":400},[383,536,473],{"class":465},[383,538,539,541,543,545,547,550,552,554,557,559,561,563],{"class":385,"line":426},[383,540,478],{"class":465},[383,542,481],{"class":469},[383,544,484],{"class":407},[383,546,487],{"class":465},[383,548,549],{"class":400},"\"image\u002Fwebp\"",[383,551,493],{"class":407},[383,553,487],{"class":465},[383,555,556],{"class":400},"\"\u002Fimg\u002Fp42-800.webp 800w, \u002Fimg\u002Fp42-1600.webp 1600w\"",[383,558,501],{"class":407},[383,560,487],{"class":465},[383,562,506],{"class":400},[383,564,473],{"class":465},[383,566,567,569,571,574,576,579,582,584,587,590,592,595,598,600,603],{"class":385,"line":440},[383,568,478],{"class":465},[383,570,53],{"class":469},[383,572,573],{"class":407}," src",[383,575,487],{"class":465},[383,577,578],{"class":400},"\"\u002Fimg\u002Fp42-1600.jpg\"",[383,580,581],{"class":407}," width",[383,583,487],{"class":465},[383,585,586],{"class":400},"\"1600\"",[383,588,589],{"class":407}," height",[383,591,487],{"class":465},[383,593,594],{"class":400},"\"1200\"",[383,596,597],{"class":407}," alt",[383,599,487],{"class":465},[383,601,602],{"class":400},"\"Leather boot, side view\"",[383,604,473],{"class":465},[383,606,607,610,612],{"class":385,"line":446},[383,608,609],{"class":465},"\u003C\u002F",[383,611,470],{"class":469},[383,613,473],{"class":465},[383,615,617],{"class":385,"line":616},7,[383,618,619],{"class":389},"\u003C!-- trade-off: every extra \u003Csource> adds HTML bytes for every image; on pages\n",[383,621,623],{"class":385,"line":622},8,[383,624,625],{"class":389},"     with many images, Accept-header negotiation at a CDN keeps markup small. -->\n",[15,627,628,629,632],{},"Browsers pick the first ",[38,630,631],{},"type"," they support, so Safari receives JXL, others AVIF.",[369,634,636],{"id":635},"_3-or-negotiate-at-the-cdn-with-accept","3. Or negotiate at the CDN with Accept",[15,638,639,640,643,644,647],{},"An image CDN or edge function can inspect ",[38,641,642],{},"Accept: image\u002Fjxl,image\u002Favif,..."," and return the best supported format from a single URL, with ",[38,645,646],{},"Vary: Accept",".",[374,649,653],{"className":650,"code":651,"language":652,"meta":379,"style":379},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F Edge function sketch: choose format from Accept.\nconst accept = request.headers.get('accept') || '';\nconst fmt = accept.includes('image\u002Fjxl') ? 'jxl' : accept.includes('image\u002Favif') ? 'avif' : accept.includes('image\u002Fwebp') ? 'webp' : 'jpg';\n\u002F\u002F trade-off: Vary: Accept fragments the cache by Accept header string; normalise\n\u002F\u002F it to a small set of format keys in the cache key to keep hit rates high.\n","javascript",[38,654,655,660,697,769,774],{"__ignoreMap":379},[383,656,657],{"class":385,"line":386},[383,658,659],{"class":389},"\u002F\u002F Edge function sketch: choose format from Accept.\n",[383,661,662,666,669,672,675,679,682,685,688,691,694],{"class":385,"line":393},[383,663,665],{"class":664},"sPARh","const",[383,667,668],{"class":407}," accept",[383,670,671],{"class":664}," =",[383,673,674],{"class":465}," request.headers.",[383,676,678],{"class":677},"smZ65","get",[383,680,681],{"class":465},"(",[383,683,684],{"class":400},"'accept'",[383,686,687],{"class":465},") ",[383,689,690],{"class":664},"||",[383,692,693],{"class":400}," ''",[383,695,696],{"class":465},";\n",[383,698,699,701,704,706,709,712,714,717,719,722,725,728,730,732,734,737,739,741,744,746,748,750,752,755,757,759,762,764,767],{"class":385,"line":420},[383,700,665],{"class":664},[383,702,703],{"class":407}," fmt",[383,705,671],{"class":664},[383,707,708],{"class":465}," accept.",[383,710,711],{"class":677},"includes",[383,713,681],{"class":465},[383,715,716],{"class":400},"'image\u002Fjxl'",[383,718,687],{"class":465},[383,720,721],{"class":664},"?",[383,723,724],{"class":400}," 'jxl'",[383,726,727],{"class":664}," :",[383,729,708],{"class":465},[383,731,711],{"class":677},[383,733,681],{"class":465},[383,735,736],{"class":400},"'image\u002Favif'",[383,738,687],{"class":465},[383,740,721],{"class":664},[383,742,743],{"class":400}," 'avif'",[383,745,727],{"class":664},[383,747,708],{"class":465},[383,749,711],{"class":677},[383,751,681],{"class":465},[383,753,754],{"class":400},"'image\u002Fwebp'",[383,756,687],{"class":465},[383,758,721],{"class":664},[383,760,761],{"class":400}," 'webp'",[383,763,727],{"class":664},[383,765,766],{"class":400}," 'jpg'",[383,768,696],{"class":465},[383,770,771],{"class":385,"line":426},[383,772,773],{"class":389},"\u002F\u002F trade-off: Vary: Accept fragments the cache by Accept header string; normalise\n",[383,775,776],{"class":385,"line":440},[383,777,778],{"class":389},"\u002F\u002F it to a small set of format keys in the cache key to keep hit rates high.\n",[369,780,782],{"id":781},"_4-measure-who-actually-benefits","4. Measure who actually benefits",[15,784,785,786,789],{},"Log the format served per request (or ",[38,787,788],{},"currentSrc"," extension in RUM) and compute bytes saved for JXL-capable users. If the benefit is small, simplify.",[15,791,792],{},[49,793,56,796,56,799,56,802,56,804,56,821,56,824,56,826,56,831,56,837,56,841,56,844,56,850,56,858,56,863,56,867,56,872,56,876,56,880,56,882,56,885,56,889,56,892,56,895,56,898,56,901,56,905,56,909,56,911,56,914,56,917,56,920,56,924,56,927,56,930,56],{"viewBox":794,"width":52,"role":53,"ariaLabel":795,"style":55},"0 0 760 357","Decision sequence for whether adding JPEG XL to an image pipeline is worthwhile.",[58,797],{"className":798,"x":62,"y":62,"width":52,"height":52,"fill":63},[61],[65,800,801],{},"Should you add JPEG XL?",[69,803,795],{},[805,806,807],"defs",{},[808,809,816],"marker",{"id":810,"viewBox":811,"refX":812,"refY":813,"markerWidth":814,"markerHeight":814,"orient":815},"fa87b6e79a","0 0 10 10","9","5","7","auto-start-reverse",[817,818],"path",{"d":819,"fill":78,"style":820},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[58,822],{"x":73,"y":73,"width":74,"height":823,"rx":76,"fill":77,"stroke":78,"style":79},"355",[81,825,801],{"x":83,"y":84,"fill":78,"style":85},[58,827],{"x":83,"y":88,"width":828,"height":829,"rx":830,"fill":78,"stroke":78,"style":91},"320.0","52.0","6",[81,832,836],{"x":833,"y":834,"fill":78,"style":835,"textAnchor":106},"188.0","78.0","font-size:13px;font-weight:700","Large share of Safari traffic and quality-critical",[81,838,840],{"x":833,"y":839,"fill":78,"style":835,"textAnchor":106},"95.0","photos?",[58,842],{"x":843,"y":88,"width":828,"height":829,"rx":830,"fill":141,"stroke":141,"style":142},"412.0",[81,845,849],{"x":846,"y":847,"fill":78,"style":848,"textAnchor":106},"572.0","86.5","font-size:12.5px","Add JXL first in picture or via CDN negotiation",[385,851],{"x1":852,"y1":853,"x2":854,"y2":853,"stroke":78,"strokeWidth":855,"style":856,"markerEnd":857},"348.0","82.0","410.0","1.5","stroke-opacity:0.6","url(#fa87b6e79a)",[81,859,183],{"x":860,"y":861,"fill":141,"style":862,"textAnchor":106},"380.0","75.0","font-size:11.5px;font-weight:700",[385,864],{"x1":833,"y1":865,"x2":833,"y2":866,"stroke":78,"strokeWidth":855,"style":856,"markerEnd":857},"108.0","142.0",[81,868,193],{"x":869,"y":870,"fill":871,"style":862},"196.0","130.0","#51617a",[58,873],{"x":83,"y":874,"width":828,"height":875,"rx":830,"fill":78,"stroke":78,"style":91},"144.0","50.0",[81,877,879],{"x":833,"y":878,"fill":78,"style":835,"textAnchor":106},"173.5","Large archive of original JPEGs?",[58,881],{"x":843,"y":874,"width":828,"height":875,"rx":830,"fill":141,"stroke":141,"style":142},[81,883,884],{"x":846,"y":177,"fill":78,"style":848,"textAnchor":106},"Consider lossless JXL recompression for supporting",[81,886,888],{"x":846,"y":887,"fill":78,"style":848,"textAnchor":106},"181.5","browsers",[385,890],{"x1":852,"y1":891,"x2":854,"y2":891,"stroke":78,"strokeWidth":855,"style":856,"markerEnd":857},"169.0",[81,893,183],{"x":860,"y":894,"fill":141,"style":862,"textAnchor":106},"162.0",[385,896],{"x1":833,"y1":353,"x2":833,"y2":897,"stroke":78,"strokeWidth":855,"style":856,"markerEnd":857},"228.0",[81,899,193],{"x":869,"y":900,"fill":871,"style":862},"216.0",[58,902],{"x":83,"y":903,"width":828,"height":904,"rx":830,"fill":78,"stroke":78,"style":91},"230.0","35.0",[81,906,908],{"x":833,"y":907,"fill":78,"style":835,"textAnchor":106},"252.0","Image CDN already supports JXL?",[58,910],{"x":843,"y":903,"width":828,"height":904,"rx":830,"fill":141,"stroke":141,"style":142},[81,912,913],{"x":846,"y":907,"fill":78,"style":848,"textAnchor":106},"Enable it — near-zero effort",[385,915],{"x1":852,"y1":916,"x2":854,"y2":916,"stroke":78,"strokeWidth":855,"style":856,"markerEnd":857},"247.5",[81,918,183],{"x":860,"y":919,"fill":141,"style":862,"textAnchor":106},"240.5",[385,921],{"x1":833,"y1":922,"x2":833,"y2":923,"stroke":78,"strokeWidth":855,"style":856,"markerEnd":857},"265.0","299.0",[81,925,193],{"x":869,"y":926,"fill":871,"style":862},"287.0",[58,928],{"x":83,"y":929,"width":828,"height":84,"rx":830,"fill":132,"stroke":133,"style":134},"301.0",[81,931,933],{"x":833,"y":932,"fill":78,"style":848,"textAnchor":106},"322.5","Stay with AVIF + WebP + JPEG",[215,935,937],{"id":936},"verification","Verification",[15,939,940,941,943,944,947,948,951,952,955],{},"In Safari, ",[38,942,788],{}," should end in ",[38,945,946],{},".jxl"," (or the response ",[38,949,950],{},"Content-Type"," should be ",[38,953,954],{},"image\u002Fjxl"," with negotiation); in Chromium, AVIF. Compare transferred image bytes for Safari sessions before and after in RUM. Visually compare JXL outputs against your quality bar.",[215,957,959],{"id":958},"worked-example-a-photography-portfolio-platform","Worked Example: A Photography Portfolio Platform",[15,961,962,963,965],{},"A portfolio platform served high-quality JPEGs (q90) because photographers complained about AVIF artefacts in fine textures at lower settings. About 38% of visitors used Safari. Adding JXL at distance 0.8 for Safari (via the image CDN's ",[38,964,44],{}," negotiation) cut image bytes for those visitors by 34% with no quality complaints; AVIF at a conservative quality served others. Total CDN egress dropped 13%, and LCP p75 for Safari users improved by 180ms on mobile.",[215,967,969],{"id":968},"format-strategy-beyond-jxl","Format Strategy Beyond JXL",[15,971,972],{},"Format choice is one lever among several, and usually not the largest. Right-sizing images (serving 800px instead of 2400px) typically saves more than any format switch, and correct priority hints save more time than any byte reduction. Treat JXL as a refinement for image-heavy, quality-sensitive sites with a meaningful Safari audience — after responsive sizing, AVIF\u002FWebP and LCP prioritisation are in place. For most sites, AVIF with WebP and JPEG fallbacks remains the pragmatic default.",[215,974,976],{"id":975},"keeping-the-option-cheap-to-maintain","Keeping the Option Cheap to Maintain",[15,978,979],{},"The main cost of JPEG XL is operational, not technical. Each extra format adds a column to every image's variant matrix: more encode time in CI, more objects in storage, more cache entries at the CDN, and one more thing to check when a template changes. Keep that cost small with three habits. First, generate JXL only for the image classes where it matters — hero and product photography — and leave thumbnails, icons and illustrations on AVIF and WebP. Second, put the format list in one shared helper or CDN preset, so removing JXL later (or promoting it if Chromium support returns) is a one-line change rather than a template hunt. Third, review the RUM numbers every quarter. If JXL-capable sessions shrink, or the bytes saved per session fall below what the extra storage and build minutes cost, drop the format without regret. Because every request already has a fallback, removing JXL has no visible effect on users.",[215,981,983],{"id":982},"common-mistakes","Common Mistakes",[220,985,986,992,998,1004],{},[223,987,988,991],{},[226,989,990],{},"Serving JXL without fallbacks."," Breaks images for most browsers.",[223,993,994,997],{},[226,995,996],{},"Putting JXL after AVIF in picture."," Safari supports both and will take the first match.",[223,999,1000,1003],{},[226,1001,1002],{},"Negotiating without Vary."," Caches may serve JXL to browsers that cannot decode it.",[223,1005,1006,1009],{},[226,1007,1008],{},"Assuming universal gains."," At low quality settings, AVIF can match or beat JXL.",[215,1011,1013],{"id":1012},"edge-cases","Edge Cases",[15,1015,1016,1019],{},[226,1017,1018],{},"Progressive JXL and LCP."," Progressive previews may paint early, but LCP accounting for progressive paints varies; do not rely on it for metrics.",[15,1021,1022,1025],{},[226,1023,1024],{},"Wide gamut and HDR."," JXL supports them well; serve them only where colour management is correct end to end.",[15,1027,1028,1031,1032,1035],{},[226,1029,1030],{},"Social and email previews."," Use JPEG for ",[38,1033,1034],{},"og:image"," and email; scrapers rarely support JXL.",[15,1037,1038,1041],{},[226,1039,1040],{},"Storage costs."," Each extra format multiplies variants; budget storage before generating JXL for every width.",[215,1043,1045],{"id":1044},"faq","FAQ",[1047,1048,1051,1055],"details",{"className":1049},[1050],"faq-item",[1052,1053,1054],"summary",{},"Does Chrome support JPEG XL?",[15,1056,1057],{},"Chromium removed its earlier experimental JXL support, and its status has been debated since. Check current support tables before relying on it; design your serving so JXL is an optional enhancement.",[1047,1059,1061,1064],{"className":1060},[1050],[1052,1062,1063],{},"Is lossless JPEG recompression really lossless?",[15,1065,1066],{},"Yes — the original JPEG can be reconstructed bit for bit from the JXL file. That makes it safe for archives where originals must be preserved.",[1047,1068,1070,1073],{"className":1069},[1050],[1052,1071,1072],{},"Is JXL better than AVIF?",[15,1074,1075],{},"At high fidelity and for progressive decoding, often yes; at aggressive compression levels, AVIF is frequently comparable or better. The bigger difference today is browser support.",[1047,1077,1079,1082],{"className":1078},[1050],[1052,1080,1081],{},"Does adding JXL slow down builds?",[15,1083,1084],{},"Encoding JXL is generally faster than AVIF at comparable effort, but every additional format adds time and storage. Cache outputs by content hash.",[1047,1086,1088,1091],{"className":1087},[1050],[1052,1089,1090],{},"How do I detect JXL support in JavaScript?",[15,1092,1093,1094,1097,1098,1100],{},"Decode a tiny JXL data URI in an ",[38,1095,1096],{},"Image"," and check whether it loads, or rely on ",[38,1099,40],{}," and server negotiation, which avoid script-based detection entirely.",[1047,1102,1104,1107],{"className":1103},[1050],[1052,1105,1106],{},"Should the LCP image be served as JXL?",[15,1108,1109,1110,1112,1113,1116],{},"If the browser supports it and it is smaller at your quality target, yes, via the same ",[38,1111,40],{}," or negotiation. Keep ",[38,1114,1115],{},"fetchpriority=\"high\""," and preloading consistent: a preload for the AVIF file would be wasted on Safari if it then uses JXL.",[215,1118,1120],{"id":1119},"related","Related",[220,1122,1123,1130,1137],{},[223,1124,1125,1129],{},[19,1126,1128],{"href":1127},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F","AVIF vs WebP: which format to serve"," — the mainstream choice.",[223,1131,1132,1136],{},[19,1133,1135],{"href":1134},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings\u002F","Choosing AVIF and WebP quality settings"," — quality targets that apply to JXL too.",[223,1138,1139,1143],{},[19,1140,1142],{"href":1141},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fcdn-edge-caching-configuration\u002Fvary-header-pitfalls-that-destroy-cdn-hit-rate\u002F","Vary header pitfalls that destroy CDN hit rate"," — negotiating formats without fragmenting caches.",[1145,1146,1148],"script",{"type":1147},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"JPEG XL Support and Fallbacks: Should You Serve It Today?\",\n  \"description\": \"Where JPEG XL fits alongside AVIF and WebP, how to serve it only to browsers that support it, and whether it is worth adding to your pipeline today.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Encode JXL alongside existing formats\",\n      \"text\": \"Encode JXL alongside existing formats\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Serve with picture, JXL first\",\n      \"text\": \"Browsers pick the first type they support, so Safari receives JXL, others AVIF.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Or negotiate at the CDN with Accept\",\n      \"text\": \"An image CDN or edge function can inspect Accept: image\u002Fjxl,image\u002Favif,...\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Measure who actually benefits\",\n      \"text\": \"Log the format served per request (or currentSrc extension in RUM) and compute bytes saved for JXL-capable users.\"\n    }\n  ]\n}\n",[1145,1150,1151],{"type":1147},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"JPEG XL Support and Fallbacks: Should You Serve It Today?\",\n  \"description\": \"Where JPEG XL fits alongside AVIF and WebP, how to serve it only to browsers that support it, and whether it is worth adding to your pipeline today.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks\u002F\"\n  }\n}\n",[1145,1153,1154],{"type":1147},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Image & Media Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Serving AVIF and WebP with Fallbacks\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"JPEG XL Support and Fallbacks\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks\u002F\"\n    }\n  ]\n}\n",[1156,1157,1158],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}",{"title":379,"searchDepth":393,"depth":393,"links":1160},[1161,1162,1163,1169,1170,1171,1172,1173,1174,1175,1176],{"id":217,"depth":393,"text":218},{"id":250,"depth":393,"text":251},{"id":366,"depth":393,"text":367,"children":1164},[1165,1166,1167,1168],{"id":371,"depth":420,"text":372},{"id":452,"depth":420,"text":453},{"id":635,"depth":420,"text":636},{"id":781,"depth":420,"text":782},{"id":936,"depth":393,"text":937},{"id":958,"depth":393,"text":959},{"id":968,"depth":393,"text":969},{"id":975,"depth":393,"text":976},{"id":982,"depth":393,"text":983},{"id":1012,"depth":393,"text":1013},{"id":1044,"depth":393,"text":1045},{"id":1119,"depth":393,"text":1120},"Where JPEG XL fits alongside AVIF and WebP, how to serve it only to browsers that support it, and whether it is worth adding to your pipeline today.","md",{"slug":1180,"type":1181,"breadcrumb":1182,"datePublished":1190,"dateModified":1190},"jpeg-xl-support-and-fallbacks","article",[1183,1186,1187,1188],{"name":1184,"url":1185},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1189},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks",{"title":1194,"description":1195},"JPEG XL on the Web: Support, Benefits and Fallbacks","JPEG XL offers lossless JPEG recompression and strong quality per byte, but browser support is limited. Serve it safely with picture, Accept negotiation, fallbacks.","image-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks\u002Findex","8P2NYAAf1SyXMNBKWO5-1narqJN-r77BSM3LVZEgWtk",[1199,1203],{"title":1200,"path":1201,"stem":1202},"Choosing AVIF and WebP Quality Settings","\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings","image-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings\u002Findex",{"title":1204,"path":1205,"stem":1206},"SVG & Icon Optimization","\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization","image-media-optimization\u002Fsvg-and-icon-optimization\u002Findex",1791308075902]