[{"data":1,"prerenderedAt":1223},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve":3,"surroundings:\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve":1215},{"id":4,"title":5,"body":6,"description":1193,"extension":1194,"meta":1195,"navigation":1208,"path":1209,"seo":1210,"stem":1213,"__hash__":1214},"content\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002Findex.md","AVIF vs WebP: Which Format to Serve",{"type":7,"value":8,"toc":1184},"minimark",[9,14,39,213,218,247,251,254,377,391,395,398,408,417,427,431,437,447,619,622,628,743,746,752,914,917,923,966,969,973,983,994,1096,1100,1130,1134,1169,1174,1177,1180],[10,11,13],"h1",{"id":12},"avif-vs-webp-which-format-should-you-serve-first","AVIF vs WebP: Which Format Should You Serve First?",[15,16,17,18,23,24,28,29,33,34,38],"p",{},"This question sits underneath the broader workflow in ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002F","serving AVIF and WebP with fallbacks",", part of the ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002F","Image & Media Optimization"," discipline: once you have decided to ship modern codecs behind a fallback chain, which one earns the top ",[30,31,32],"code",{},"\u003Csource>"," slot — the one the browser reaches for first? The honest answer is that there is no single winner; the right primary codec depends on the content class, the device tier you are optimizing for, and whether the image lands on the ",[19,35,37],{"href":36},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F","Largest Contentful Paint"," critical path. This page replaces \"always AVIF\" with a decision you can defend per image.",[15,40,41],{},[42,43,50,51,50,55,50,59,50,69,50,76,50,82,50,86,50,90,50,96,50,106,50,111,50,114,50,117,50,121,50,124,50,127,50,132,50,136,50,139,50,142,50,146,50,149,50,152,50,154,50,158,50,161,50,164,50,166,50,170,50,173,50,176,50,178,50,182,50,185,50,187,50,190,50,194,50,196,50,198,50,201,50,205,50,208,50,211,50],"svg",{"xmlns":44,"viewBox":45,"width":46,"role":47,"ariaLabel":48,"style":49},"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","0 0 760 330","100%","img","A comparison matrix of AVIF versus WebP across seven axes, marking which codec wins each","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:#001d3d"," ",[52,53,54],"title",{},"AVIF vs WebP comparison matrix",[56,57,58],"desc",{},"Seven decision axes scored for AVIF and WebP, with the winning codec per axis.",[60,61],"rect",{"x":62,"y":62,"width":63,"height":64,"rx":65,"fill":66,"stroke":67,"style":68},"1","758","328","10","none","currentColor","stroke-opacity:0.18",[70,71,75],"text",{"x":72,"y":73,"fill":67,"style":74},"24","38","font-size:17px;font-weight:700","AVIF vs WebP: seven axes",[70,77,81],{"x":78,"y":79,"fill":67,"style":80},"360","64","font-size:13px;font-weight:700;text-anchor:middle","AVIF",[70,83,85],{"x":84,"y":79,"fill":67,"style":80},"500","WebP",[70,87,89],{"x":88,"y":79,"fill":67,"style":80},"660","Edge",[91,92],"line",{"x1":72,"y1":93,"x2":94,"y2":93,"stroke":67,"style":95},"74","736","stroke-opacity:0.3",[60,97],{"x":98,"y":99,"width":100,"height":101,"rx":102,"fill":103,"stroke":104,"style":105},"612","84","96","22","4","#ffc300","#b8860b","fill-opacity:0.22",[60,107],{"x":98,"y":108,"width":100,"height":101,"rx":102,"fill":109,"stroke":109,"style":110},"116","#0466c8","fill-opacity:0.16",[60,112],{"x":98,"y":113,"width":100,"height":101,"rx":102,"fill":109,"stroke":109,"style":110},"148",[60,115],{"x":98,"y":116,"width":100,"height":101,"rx":102,"fill":109,"stroke":109,"style":110},"180",[60,118],{"x":98,"y":119,"width":100,"height":101,"rx":102,"fill":67,"stroke":67,"style":120},"212","stroke-opacity:0.4;fill-opacity:0.08",[60,122],{"x":98,"y":123,"width":100,"height":101,"rx":102,"fill":67,"stroke":67,"style":120},"244",[60,125],{"x":98,"y":126,"width":100,"height":101,"rx":102,"fill":103,"stroke":104,"style":105},"276",[70,128,131],{"x":72,"y":129,"fill":67,"style":130},"100","font-size:12px","Compression (photos)",[70,133,135],{"x":78,"y":129,"fill":67,"style":134},"font-size:12px;text-anchor:middle","~50% \u003C JPEG",[70,137,138],{"x":84,"y":129,"fill":67,"style":134},"~30% \u003C JPEG",[70,140,81],{"x":88,"y":129,"fill":67,"style":141},"font-size:12px;font-weight:600;text-anchor:middle",[70,143,145],{"x":72,"y":144,"fill":67,"style":130},"132","Encode time",[70,147,148],{"x":78,"y":144,"fill":67,"style":134},"slow",[70,150,151],{"x":84,"y":144,"fill":67,"style":134},"fast",[70,153,85],{"x":88,"y":144,"fill":67,"style":141},[70,155,157],{"x":72,"y":156,"fill":67,"style":130},"164","Browser support",[70,159,160],{"x":78,"y":156,"fill":67,"style":134},"evergreen",[70,162,163],{"x":84,"y":156,"fill":67,"style":134},"universal",[70,165,85],{"x":88,"y":156,"fill":67,"style":141},[70,167,169],{"x":72,"y":168,"fill":67,"style":130},"196","Decode cost (low CPU)",[70,171,172],{"x":78,"y":168,"fill":67,"style":134},"heavy",[70,174,175],{"x":84,"y":168,"fill":67,"style":134},"light",[70,177,85],{"x":88,"y":168,"fill":67,"style":141},[70,179,181],{"x":72,"y":180,"fill":67,"style":130},"228","Alpha \u002F transparency",[70,183,184],{"x":78,"y":180,"fill":67,"style":134},"yes",[70,186,184],{"x":84,"y":180,"fill":67,"style":134},[70,188,189],{"x":88,"y":180,"fill":67,"style":141},"tie",[70,191,193],{"x":72,"y":192,"fill":67,"style":130},"260","Animation",[70,195,172],{"x":78,"y":192,"fill":67,"style":134},[70,197,172],{"x":84,"y":192,"fill":67,"style":134},[70,199,200],{"x":88,"y":192,"fill":67,"style":141},"video",[70,202,204],{"x":72,"y":203,"fill":67,"style":130},"292","HDR \u002F wide gamut",[70,206,207],{"x":78,"y":203,"fill":67,"style":134},"10\u002F12-bit",[70,209,210],{"x":84,"y":203,"fill":67,"style":134},"8-bit only",[70,212,81],{"x":88,"y":203,"fill":67,"style":141},[214,215,217],"h2",{"id":216},"rapid-diagnosis-which-axis-actually-decides-it","Rapid Diagnosis: Which Axis Actually Decides It",[15,219,220,221,225,226,229,230,233,234,237,238,242,243,246],{},"Before reaching for a matrix, narrow the decision with a four-question DevTools checklist on the specific image in question. First, ",[222,223,224],"strong",{},"is it the LCP element?"," Open the Performance panel, throttle CPU 6x, and find the ",[30,227,228],{},"Decode Image"," task — if the image is the LCP candidate and decode is a large slice of render delay, decode cost outweighs raw byte savings. Second, ",[222,231,232],{},"what content class is it?"," Photographic continuous-tone images favor AVIF; flat illustrations, screenshots, and text-bearing graphics expose AVIF banding earlier and narrow its lead. Third, ",[222,235,236],{},"how small is it?"," Below a few KB, AVIF's container overhead can make it ",[239,240,241],"em",{},"larger"," than WebP — check actual transferred bytes, not the assumption. Fourth, ",[222,244,245],{},"does it need alpha or animation?"," Both support alpha; neither is a good animation choice. Those four answers usually decide the format before you ever consult the table.",[214,248,250],{"id":249},"the-2026-decision-matrix","The 2026 Decision Matrix",[15,252,253],{},"The trade-offs cluster along seven axes. AVIF generally wins on raw compression and HDR; WebP wins on encode speed, decode cost, and small-image overhead; support is effectively universal for both among current browsers.",[255,256,257,274],"table",{},[258,259,260],"thead",{},[261,262,263,267,269,271],"tr",{},[264,265,266],"th",{},"Axis",[264,268,81],{},[264,270,85],{},[264,272,273],{},"Edge to",[275,276,277,293,308,324,339,351,363],"tbody",{},[261,278,279,283,286,289],{},[280,281,282],"td",{},"Compression ratio (photos, matched quality)",[280,284,285],{},"~50% smaller than JPEG",[280,287,288],{},"~30% smaller than JPEG",[280,290,291],{},[222,292,81],{},[261,294,295,298,301,304],{},[280,296,297],{},"Encode time (max effort)",[280,299,300],{},"Slow; seconds per large image",[280,302,303],{},"Fast; well under a second",[280,305,306],{},[222,307,85],{},[261,309,310,313,316,319],{},[280,311,312],{},"Browser support (2026)",[280,314,315],{},"All current evergreen browsers",[280,317,318],{},"Universal incl. older versions",[280,320,321,323],{},[222,322,85],{}," (marginally)",[261,325,326,329,332,335],{},[280,327,328],{},"Decode cost (low-end CPU)",[280,330,331],{},"Heavy; tens of ms on large images",[280,333,334],{},"Light; close to JPEG",[280,336,337],{},[222,338,85],{},[261,340,341,343,346,348],{},[280,342,181],{},[280,344,345],{},"Yes, efficient",[280,347,345],{},[280,349,350],{},"Tie",[261,352,353,355,358,360],{},[280,354,193],{},[280,356,357],{},"Supported but heavy",[280,359,357],{},[280,361,362],{},"Neither (use video)",[261,364,365,368,371,373],{},[280,366,367],{},"HDR \u002F wide gamut (10\u002F12-bit)",[280,369,370],{},"Native support",[280,372,210],{},[280,374,375],{},[222,376,81],{},[15,378,379,380,383,384,50,387,390],{},"A few cells deserve the caveat that a single word in a table cannot carry. The compression edge for AVIF is largest on noisy, detailed photography and shrinks toward parity on flat or low-frequency images. The support row reads \"universal\" for both because legacy-browser share is now negligible, but WebP's longer history means a slightly deeper tail of old clients decode it — which only matters if your fallback ",[30,381,382],{},"\u003Cimg>"," is missing, and it never should be. And the animation row is a warning, not a comparison: when you reach for animated AVIF or WebP, stop and reach for a muted ",[30,385,386],{},"playsinline",[30,388,389],{},"\u003Cvideo>"," instead, which beats both on bytes and decode.",[214,392,394],{"id":393},"root-cause-analysis-why-the-always-avif-reflex-misfires","Root Cause Analysis: Why the \"Always AVIF\" Reflex Misfires",[15,396,397],{},"Three named failure modes explain why defaulting every image to AVIF backfires in production.",[15,399,400,403,404,407],{},[222,401,402],{},"1. Decode-bound LCP regression."," AVIF decode is CPU-heavy, and the LCP element must be decoded before it can paint — ",[30,405,406],{},"decoding=\"async\""," cannot move that work off the critical path for the element that defines the metric. On a low-end phone a full-bleed AVIF hero can spend 30–80ms decoding, landing inside the LCP render-delay phase. The mechanism: you shaved 80KB off transfer but added 60ms of decode, and on a fast-but-throttled-CPU device the WebP variant paints sooner despite being larger. The byte chart shows a win; the LCP timestamp shows a loss.",[15,409,410,413,414,416],{},[222,411,412],{},"2. Small-image overhead inversion."," AVIF's container and per-tile metadata impose a fixed overhead that is invisible on a 1200px hero but dominates on a 48px icon or a 4KB thumbnail. The mechanism: below the overhead break-even point, the AVIF is ",[239,415,241],{}," than the WebP or even an optimized PNG, so an \"optimize everything to AVIF\" build step quietly inflates your smallest, most numerous assets.",[15,418,419,422,423,426],{},[222,420,421],{},"3. Flat-content banding."," AVIF's aggressive quantization at low ",[30,424,425],{},"cq-level"," introduces visible banding in smooth gradients and ringing around hard edges — sunsets, UI chrome, charts, text screenshots. The mechanism: to hide the banding you must raise quality, which erodes the byte lead until WebP at a comparable perceptual score is competitive, with cheaper decode as a bonus.",[214,428,430],{"id":429},"step-by-step-resolution-picking-and-ordering-the-codec","Step-by-Step Resolution: Picking and Ordering the Codec",[15,432,433,434,436],{},"Apply these fixes in order of impact. Each assumes you already ship a fallback ",[30,435,382],{}," floor as described in the parent guide.",[15,438,439,442,443,446],{},[222,440,441],{},"1. Default photographic content to AVIF-first, WebP-second."," For continuous-tone photos above the small-image threshold, order AVIF before WebP in the ",[30,444,445],{},"\u003Cpicture>"," chain so supporting browsers take the smallest file.",[448,449,454],"pre",{"className":450,"code":451,"language":452,"meta":453,"style":453},"language-html shiki shiki-themes github-light-high-contrast github-light-high-contrast github-light-high-contrast","\u003Cpicture>\n  \u003Csource type=\"image\u002Favif\" srcset=\"photo-1200.avif 1200w\" sizes=\"1100px\">\n  \u003Csource type=\"image\u002Fwebp\" srcset=\"photo-1200.webp 1200w\" sizes=\"1100px\">\n  \u003Cimg src=\"photo-1200.jpg\" width=\"1200\" height=\"800\" alt=\"Coastline at dusk\"\n       decoding=\"async\">\n\u003C\u002Fpicture>\n\u003C!-- trade-off: AVIF-first assumes decode is not on the critical path. For the LCP\n     hero on a low-end-device audience, profile decode first; WebP-first can paint\n     sooner there despite shipping more bytes. -->\n","html","",[30,455,456,471,509,538,577,590,600,607,613],{"__ignoreMap":453},[457,458,460,464,468],"span",{"class":91,"line":459},1,[457,461,463],{"class":462},"syybb","\u003C",[457,465,467],{"class":466},"s-fAs","picture",[457,469,470],{"class":462},">\n",[457,472,474,477,480,484,487,491,494,496,499,502,504,507],{"class":91,"line":473},2,[457,475,476],{"class":462},"  \u003C",[457,478,479],{"class":466},"source",[457,481,483],{"class":482},"sf6mN"," type",[457,485,486],{"class":462},"=",[457,488,490],{"class":489},"s-_DF","\"image\u002Favif\"",[457,492,493],{"class":482}," srcset",[457,495,486],{"class":462},[457,497,498],{"class":489},"\"photo-1200.avif 1200w\"",[457,500,501],{"class":482}," sizes",[457,503,486],{"class":462},[457,505,506],{"class":489},"\"1100px\"",[457,508,470],{"class":462},[457,510,512,514,516,518,520,523,525,527,530,532,534,536],{"class":91,"line":511},3,[457,513,476],{"class":462},[457,515,479],{"class":466},[457,517,483],{"class":482},[457,519,486],{"class":462},[457,521,522],{"class":489},"\"image\u002Fwebp\"",[457,524,493],{"class":482},[457,526,486],{"class":462},[457,528,529],{"class":489},"\"photo-1200.webp 1200w\"",[457,531,501],{"class":482},[457,533,486],{"class":462},[457,535,506],{"class":489},[457,537,470],{"class":462},[457,539,541,543,545,548,550,553,556,558,561,564,566,569,572,574],{"class":91,"line":540},4,[457,542,476],{"class":462},[457,544,47],{"class":466},[457,546,547],{"class":482}," src",[457,549,486],{"class":462},[457,551,552],{"class":489},"\"photo-1200.jpg\"",[457,554,555],{"class":482}," width",[457,557,486],{"class":462},[457,559,560],{"class":489},"\"1200\"",[457,562,563],{"class":482}," height",[457,565,486],{"class":462},[457,567,568],{"class":489},"\"800\"",[457,570,571],{"class":482}," alt",[457,573,486],{"class":462},[457,575,576],{"class":489},"\"Coastline at dusk\"\n",[457,578,580,583,585,588],{"class":91,"line":579},5,[457,581,582],{"class":482},"       decoding",[457,584,486],{"class":462},[457,586,587],{"class":489},"\"async\"",[457,589,470],{"class":462},[457,591,593,596,598],{"class":91,"line":592},6,[457,594,595],{"class":462},"\u003C\u002F",[457,597,467],{"class":466},[457,599,470],{"class":462},[457,601,603],{"class":91,"line":602},7,[457,604,606],{"class":605},"sIIH1","\u003C!-- trade-off: AVIF-first assumes decode is not on the critical path. For the LCP\n",[457,608,610],{"class":91,"line":609},8,[457,611,612],{"class":605},"     hero on a low-end-device audience, profile decode first; WebP-first can paint\n",[457,614,616],{"class":91,"line":615},9,[457,617,618],{"class":605},"     sooner there despite shipping more bytes. -->\n",[15,620,621],{},"Expected outcome: reduces transfer of supported clients by ~40–50% versus JPEG on detailed photos, with no LCP penalty for below-the-fold images.",[15,623,624,627],{},[222,625,626],{},"2. Promote WebP-first for the LCP image on low-end audiences."," When the Performance panel shows AVIF decode dominating render delay on your target device, flip the order so WebP wins on supporting clients and reserve AVIF for the byte-sensitive, CPU-rich case only if at all.",[448,629,631],{"className":450,"code":630,"language":452,"meta":453,"style":453},"\u003Cpicture>\n  \u003Csource type=\"image\u002Fwebp\" srcset=\"hero-1200.webp 1200w\" sizes=\"1100px\">\n  \u003Cimg src=\"hero-1200.jpg\" width=\"1200\" height=\"675\" alt=\"Dashboard hero\"\n       fetchpriority=\"high\" decoding=\"async\">\n\u003C\u002Fpicture>\n\u003C!-- trade-off: dropping the AVIF source forfeits ~10-15% more bytes. Only do this\n     when decode time measurably outweighs the byte saving on the LCP element for\n     your real device distribution. -->\n",[30,632,633,641,668,701,720,728,733,738],{"__ignoreMap":453},[457,634,635,637,639],{"class":91,"line":459},[457,636,463],{"class":462},[457,638,467],{"class":466},[457,640,470],{"class":462},[457,642,643,645,647,649,651,653,655,657,660,662,664,666],{"class":91,"line":473},[457,644,476],{"class":462},[457,646,479],{"class":466},[457,648,483],{"class":482},[457,650,486],{"class":462},[457,652,522],{"class":489},[457,654,493],{"class":482},[457,656,486],{"class":462},[457,658,659],{"class":489},"\"hero-1200.webp 1200w\"",[457,661,501],{"class":482},[457,663,486],{"class":462},[457,665,506],{"class":489},[457,667,470],{"class":462},[457,669,670,672,674,676,678,681,683,685,687,689,691,694,696,698],{"class":91,"line":511},[457,671,476],{"class":462},[457,673,47],{"class":466},[457,675,547],{"class":482},[457,677,486],{"class":462},[457,679,680],{"class":489},"\"hero-1200.jpg\"",[457,682,555],{"class":482},[457,684,486],{"class":462},[457,686,560],{"class":489},[457,688,563],{"class":482},[457,690,486],{"class":462},[457,692,693],{"class":489},"\"675\"",[457,695,571],{"class":482},[457,697,486],{"class":462},[457,699,700],{"class":489},"\"Dashboard hero\"\n",[457,702,703,706,708,711,714,716,718],{"class":91,"line":540},[457,704,705],{"class":482},"       fetchpriority",[457,707,486],{"class":462},[457,709,710],{"class":489},"\"high\"",[457,712,713],{"class":482}," decoding",[457,715,486],{"class":462},[457,717,587],{"class":489},[457,719,470],{"class":462},[457,721,722,724,726],{"class":91,"line":579},[457,723,595],{"class":462},[457,725,467],{"class":466},[457,727,470],{"class":462},[457,729,730],{"class":91,"line":592},[457,731,732],{"class":605},"\u003C!-- trade-off: dropping the AVIF source forfeits ~10-15% more bytes. Only do this\n",[457,734,735],{"class":91,"line":602},[457,736,737],{"class":605},"     when decode time measurably outweighs the byte saving on the LCP element for\n",[457,739,740],{"class":91,"line":609},[457,741,742],{"class":605},"     your real device distribution. -->\n",[15,744,745],{},"Expected outcome: removes ~30–60ms of main-thread decode from the LCP render-delay phase on low-end devices, typically reducing LCP by that margin.",[15,747,748,751],{},[222,749,750],{},"3. Size-gate AVIF so small assets stay WebP."," In the build, skip AVIF below a byte threshold where its overhead inverts the win, emitting WebP-only variants for icons and thumbnails.",[448,753,757],{"className":754,"code":755,"language":756,"meta":453,"style":453},"language-javascript shiki shiki-themes github-light-high-contrast github-light-high-contrast github-light-high-contrast","\u002F\u002F emit AVIF only above the overhead break-even; WebP for everything small\nimport sharp from 'sharp';\nconst meta = await sharp(src).metadata();\nconst big = meta.width >= 400;            \u002F\u002F small assets: WebP only\nawait sharp(src).webp({ quality: 80 }).toFile(out + '.webp');\nif (big) await sharp(src).avif({ quality: 50 }).toFile(out + '.avif');\n\u002F\u002F trade-off: the 400px gate is a heuristic, not a law. Verify break-even per asset\n\u002F\u002F class — a noisy 300px photo may still favor AVIF, a flat 600px chart may not.\n","javascript",[30,758,759,764,782,809,833,869,904,909],{"__ignoreMap":453},[457,760,761],{"class":91,"line":459},[457,762,763],{"class":605},"\u002F\u002F emit AVIF only above the overhead break-even; WebP for everything small\n",[457,765,766,770,773,776,779],{"class":91,"line":473},[457,767,769],{"class":768},"sP5qI","import",[457,771,772],{"class":462}," sharp ",[457,774,775],{"class":768},"from",[457,777,778],{"class":489}," 'sharp'",[457,780,781],{"class":462},";\n",[457,783,784,787,790,793,796,800,803,806],{"class":91,"line":511},[457,785,786],{"class":768},"const",[457,788,789],{"class":482}," meta",[457,791,792],{"class":768}," =",[457,794,795],{"class":768}," await",[457,797,799],{"class":798},"ssM3C"," sharp",[457,801,802],{"class":462},"(src).",[457,804,805],{"class":798},"metadata",[457,807,808],{"class":462},"();\n",[457,810,811,813,816,818,821,824,827,830],{"class":91,"line":540},[457,812,786],{"class":768},[457,814,815],{"class":482}," big",[457,817,792],{"class":768},[457,819,820],{"class":462}," meta.width ",[457,822,823],{"class":768},">=",[457,825,826],{"class":482}," 400",[457,828,829],{"class":462},";            ",[457,831,832],{"class":605},"\u002F\u002F small assets: WebP only\n",[457,834,835,838,840,842,845,848,851,854,857,860,863,866],{"class":91,"line":579},[457,836,837],{"class":768},"await",[457,839,799],{"class":798},[457,841,802],{"class":462},[457,843,844],{"class":798},"webp",[457,846,847],{"class":462},"({ quality: ",[457,849,850],{"class":482},"80",[457,852,853],{"class":462}," }).",[457,855,856],{"class":798},"toFile",[457,858,859],{"class":462},"(out ",[457,861,862],{"class":768},"+",[457,864,865],{"class":489}," '.webp'",[457,867,868],{"class":462},");\n",[457,870,871,874,877,879,881,883,886,888,891,893,895,897,899,902],{"class":91,"line":592},[457,872,873],{"class":768},"if",[457,875,876],{"class":462}," (big) ",[457,878,837],{"class":768},[457,880,799],{"class":798},[457,882,802],{"class":462},[457,884,885],{"class":798},"avif",[457,887,847],{"class":462},[457,889,890],{"class":482},"50",[457,892,853],{"class":462},[457,894,856],{"class":798},[457,896,859],{"class":462},[457,898,862],{"class":768},[457,900,901],{"class":489}," '.avif'",[457,903,868],{"class":462},[457,905,906],{"class":91,"line":602},[457,907,908],{"class":605},"\u002F\u002F trade-off: the 400px gate is a heuristic, not a law. Verify break-even per asset\n",[457,910,911],{"class":91,"line":609},[457,912,913],{"class":605},"\u002F\u002F class — a noisy 300px photo may still favor AVIF, a flat 600px chart may not.\n",[15,915,916],{},"Expected outcome: prevents AVIF overhead from inflating small assets, often cutting a few KB per icon across hundreds of entries.",[15,918,919,922],{},[222,920,921],{},"4. Force AVIF 4:4:4 (or stay WebP) for text and sharp-edged graphics."," For screenshots, charts, and colored text, default chroma subsampling smears edges; use full chroma or keep WebP.",[448,924,928],{"className":925,"code":926,"language":927,"meta":453,"style":453},"language-bash shiki shiki-themes github-light-high-contrast github-light-high-contrast github-light-high-contrast","avifenc --yuv 444 -a cq-level=24 chart-master.png chart.avif\n# trade-off: 4:4:4 raises bytes notably. Use it only for sharp\u002Fcolored detail;\n# leave photographic content at the default 4:2:0 where the eye can't see chroma.\n","bash",[30,929,930,956,961],{"__ignoreMap":453},[457,931,932,936,939,942,945,948,950,953],{"class":91,"line":459},[457,933,935],{"class":934},"seIZK","avifenc",[457,937,938],{"class":482}," --yuv",[457,940,941],{"class":482}," 444",[457,943,944],{"class":482}," -a",[457,946,947],{"class":489}," cq-level=",[457,949,72],{"class":482},[457,951,952],{"class":489}," chart-master.png",[457,954,955],{"class":489}," chart.avif\n",[457,957,958],{"class":91,"line":473},[457,959,960],{"class":605},"# trade-off: 4:4:4 raises bytes notably. Use it only for sharp\u002Fcolored detail;\n",[457,962,963],{"class":91,"line":511},[457,964,965],{"class":605},"# leave photographic content at the default 4:2:0 where the eye can't see chroma.\n",[15,967,968],{},"Expected outcome: eliminates color fringing on text\u002FUI at the cost of a larger file, keeping the asset legible where 4:2:0 would visibly degrade it.",[214,970,972],{"id":971},"verification","Verification",[15,974,975,976,978,979,982],{},"Confirm the choice with a before\u002Fafter diff on the specific image, not the average. Capture transferred bytes in the Network panel and the ",[30,977,228],{}," task in the Performance panel for both the old and new codec, then check the net effect on the LCP timestamp under your target CPU throttle. The win condition is unambiguous: fewer bytes ",[239,980,981],{},"and"," equal-or-earlier paint. If bytes drop but LCP rises, the decode tax exceeded the transfer saving and you chose wrong for that image.",[15,984,985,986,989,990,993],{},"Lock the decision in CI. Assert Lighthouse's ",[30,987,988],{},"modern-image-formats"," so no asset silently reverts to legacy JPEG\u002FPNG, and pair it with a hard LCP budget so a decode-bound regression cannot pass on byte size alone. For field confirmation, watch p75 LCP in your ",[19,991,992],{"href":36},"RUM data"," after the change — real-device decode cost shows up in field numbers that a fast lab machine hides.",[448,995,999],{"className":996,"code":997,"language":998,"meta":453,"style":453},"language-json shiki shiki-themes github-light-high-contrast github-light-high-contrast github-light-high-contrast","{\n  \"ci\": {\n    \"assert\": {\n      \"assertions\": {\n        \"modern-image-formats\": [\"error\", { \"minScore\": 1 }],\n        \"largest-contentful-paint\": [\"error\", { \"maxNumericValue\": 2500 }]\n      }\n    }\n  }\n}\n","json",[30,1000,1001,1006,1014,1021,1028,1053,1075,1080,1085,1090],{"__ignoreMap":453},[457,1002,1003],{"class":91,"line":459},[457,1004,1005],{"class":462},"{\n",[457,1007,1008,1011],{"class":91,"line":473},[457,1009,1010],{"class":466},"  \"ci\"",[457,1012,1013],{"class":462},": {\n",[457,1015,1016,1019],{"class":91,"line":511},[457,1017,1018],{"class":466},"    \"assert\"",[457,1020,1013],{"class":462},[457,1022,1023,1026],{"class":91,"line":540},[457,1024,1025],{"class":466},"      \"assertions\"",[457,1027,1013],{"class":462},[457,1029,1030,1033,1036,1039,1042,1045,1048,1050],{"class":91,"line":579},[457,1031,1032],{"class":466},"        \"modern-image-formats\"",[457,1034,1035],{"class":462},": [",[457,1037,1038],{"class":489},"\"error\"",[457,1040,1041],{"class":462},", { ",[457,1043,1044],{"class":466},"\"minScore\"",[457,1046,1047],{"class":462},": ",[457,1049,62],{"class":482},[457,1051,1052],{"class":462}," }],\n",[457,1054,1055,1058,1060,1062,1064,1067,1069,1072],{"class":91,"line":592},[457,1056,1057],{"class":466},"        \"largest-contentful-paint\"",[457,1059,1035],{"class":462},[457,1061,1038],{"class":489},[457,1063,1041],{"class":462},[457,1065,1066],{"class":466},"\"maxNumericValue\"",[457,1068,1047],{"class":462},[457,1070,1071],{"class":482},"2500",[457,1073,1074],{"class":462}," }]\n",[457,1076,1077],{"class":91,"line":602},[457,1078,1079],{"class":462},"      }\n",[457,1081,1082],{"class":91,"line":609},[457,1083,1084],{"class":462},"    }\n",[457,1086,1087],{"class":91,"line":615},[457,1088,1089],{"class":462},"  }\n",[457,1091,1093],{"class":91,"line":1092},10,[457,1094,1095],{"class":462},"}\n",[214,1097,1099],{"id":1098},"when-to-pick-which","When to Pick Which",[15,1101,1102,1103,1106,1107,1110,1111,1114,1115,1117,1118,1121,1122,50,1124,1126,1127,1129],{},"Reduce it to four rules. Pick ",[222,1104,1105],{},"AVIF-first"," for above-the-fold and below-the-fold ",[239,1108,1109],{},"photographic"," content where decode is not the binding constraint — it is the byte winner there. Pick ",[222,1112,1113],{},"WebP-first (or WebP-only)"," for the LCP image when your audience skews low-end and the Performance panel shows decode dominating render delay. Pick ",[222,1116,85],{}," for small assets (icons, thumbnails) where AVIF overhead inverts the saving, and for flat illustrations\u002Fcharts where banding erodes the lead — using AVIF 4:4:4 only when sharp colored detail demands it. And pick ",[222,1119,1120],{},"neither for animation",": serve a muted ",[30,1123,386],{},[30,1125,389],{},". In every case, ship the JPEG\u002FPNG ",[30,1128,382],{}," floor underneath so the decision is purely an optimization, never a compatibility risk.",[214,1131,1133],{"id":1132},"related","Related",[1135,1136,1137,1144,1151,1158,1164],"ul",{},[1138,1139,1140,1143],"li",{},[19,1141,1142],{"href":21},"Serving AVIF and WebP with fallbacks"," — the full encoding, negotiation, and fallback-chain workflow this decision plugs into.",[1138,1145,1146,1150],{},[19,1147,1149],{"href":1148},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002F","Responsive images with srcset and sizes"," — pair the codec choice with a resolution ladder so each source serves the right size too.",[1138,1152,1153,1157],{},[19,1154,1156],{"href":1155},"\u002Fimage-media-optimization\u002Fimage-cdns-and-fetchpriority\u002F","Image CDNs and fetchpriority"," — let a CDN transcode per Accept header and ensure the chosen file fetches at high priority.",[1138,1159,1160,1163],{},[19,1161,1162],{"href":36},"Measuring LCP with Chrome DevTools"," — verify that the codec decision moved the loading metric on real device profiles.",[1138,1165,1166,1168],{},[19,1167,27],{"href":26}," — the broader media-weight strategy behind the format decision.",[1170,1171,1173],"script",{"type":1172},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Decide whether to serve AVIF or WebP first\",\n  \"description\": \"A decision workflow for choosing the primary modern image codec per content class and device tier, ordering the picture fallback chain, and validating the choice.\",\n  \"step\": [\n    { \"@type\": \"HowToStep\", \"position\": 1, \"name\": \"Default photos to AVIF-first\", \"text\": \"Order AVIF before WebP for photographic content above the small-image threshold.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F#step-by-step-resolution-picking-and-ordering-the-codec\" },\n    { \"@type\": \"HowToStep\", \"position\": 2, \"name\": \"WebP-first for decode-bound LCP\", \"text\": \"Flip to WebP-first on the LCP image when decode dominates render delay on low-end devices.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F#step-by-step-resolution-picking-and-ordering-the-codec\" },\n    { \"@type\": \"HowToStep\", \"position\": 3, \"name\": \"Size-gate AVIF\", \"text\": \"Skip AVIF below the overhead break-even and serve WebP for small icons and thumbnails.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F#step-by-step-resolution-picking-and-ordering-the-codec\" },\n    { \"@type\": \"HowToStep\", \"position\": 4, \"name\": \"Use full chroma for sharp graphics\", \"text\": \"Force AVIF 4:4:4 or keep WebP for text and sharp-edged colored graphics to avoid fringing.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F#step-by-step-resolution-picking-and-ordering-the-codec\" },\n    { \"@type\": \"HowToStep\", \"position\": 5, \"name\": \"Verify and budget\", \"text\": \"Confirm fewer bytes and equal-or-earlier paint, then assert modern-image-formats and an LCP budget in CI.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F#verification\" }\n  ]\n}\n",[1170,1175,1176],{"type":1172},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"AVIF vs WebP: Which Format Should You Serve First?\",\n  \"description\": \"A 2026 decision matrix comparing AVIF and WebP on compression, encode time, support, decode cost, alpha, animation, and HDR, with a rule for each content class.\",\n  \"datePublished\": \"2026-06-18\",\n  \"dateModified\": \"2026-06-18\",\n  \"author\": { \"@type\": \"Organization\", \"name\": \"frontend-performance.com\" },\n  \"publisher\": { \"@type\": \"Organization\", \"name\": \"frontend-performance.com\" },\n  \"mainEntityOfPage\": { \"@type\": \"WebPage\", \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F\" }\n}\n",[1170,1178,1179],{"type":1172},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    { \"@type\": \"ListItem\", \"position\": 1, \"name\": \"Home\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 2, \"name\": \"Image & Media Optimization\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 3, \"name\": \"Serving AVIF and WebP with Fallbacks\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 4, \"name\": \"AVIF vs WebP: Which Format to Serve\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F\" }\n  ]\n}\n",[1181,1182,1183],"style",{},"html pre.shiki code .syybb, html code.shiki .syybb{--shiki-default:#0E1116;--shiki-dark:#0E1116;--shiki-light:#0E1116}html pre.shiki code .s-fAs, html code.shiki .s-fAs{--shiki-default:#024C1A;--shiki-dark:#024C1A;--shiki-light:#024C1A}html pre.shiki code .sf6mN, html code.shiki .sf6mN{--shiki-default:#023B95;--shiki-dark:#023B95;--shiki-light:#023B95}html pre.shiki code .s-_DF, html code.shiki .s-_DF{--shiki-default:#032563;--shiki-dark:#032563;--shiki-light:#032563}html pre.shiki code .sIIH1, html code.shiki .sIIH1{--shiki-default:#66707B;--shiki-dark:#66707B;--shiki-light:#66707B}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 .sP5qI, html code.shiki .sP5qI{--shiki-default:#A0111F;--shiki-dark:#A0111F;--shiki-light:#A0111F}html pre.shiki code .ssM3C, html code.shiki .ssM3C{--shiki-default:#622CBC;--shiki-dark:#622CBC;--shiki-light:#622CBC}html pre.shiki code .seIZK, html code.shiki .seIZK{--shiki-default:#702C00;--shiki-dark:#702C00;--shiki-light:#702C00}",{"title":453,"searchDepth":473,"depth":473,"links":1185},[1186,1187,1188,1189,1190,1191,1192],{"id":216,"depth":473,"text":217},{"id":249,"depth":473,"text":250},{"id":393,"depth":473,"text":394},{"id":429,"depth":473,"text":430},{"id":971,"depth":473,"text":972},{"id":1098,"depth":473,"text":1099},{"id":1132,"depth":473,"text":1133},"A decision matrix comparing AVIF and WebP on compression, encode cost, support, decode, alpha, animation, and HDR — and a rule for each content class.","md",{"slug":1196,"type":1197,"breadcrumb":1198,"datePublished":1207,"dateModified":1207},"avif-vs-webp-which-format-to-serve","long_tail",[1199,1202,1203,1205],{"name":1200,"url":1201},"Home","\u002F",{"name":27,"url":26},{"name":1204,"url":21},"Serving AVIF and WebP with Fallbacks",{"name":5,"url":1206},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F","2026-06-18",true,"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve",{"title":1211,"description":1212},"AVIF vs WebP: Which Format Should You Serve?","A 2026 decision matrix for AVIF vs WebP: compression, encode time, browser support, decode cost, alpha and animation, and HDR — with when to pick which.","image-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002Findex","b_ZV08I9pVhIXEslcX1Jk4cyVEYAUZDHZ1OiJOU6L1o",[1216,1219],{"title":1204,"path":1217,"stem":1218,"children":-1},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks","image-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Findex",{"title":1220,"path":1221,"stem":1222,"children":-1},"JavaScript Bundle Optimization & Code Splitting","\u002Fjavascript-bundle-optimization-code-splitting","javascript-bundle-optimization-code-splitting\u002Findex",1782237170894]