[{"data":1,"prerenderedAt":1141},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings":3,"surroundings:\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings":1132},{"id":4,"title":5,"body":6,"description":1112,"extension":1113,"meta":1114,"navigation":1125,"path":1126,"seo":1127,"stem":1130,"__hash__":1131},"content\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings\u002Findex.md","Choosing AVIF and WebP Quality Settings",{"type":7,"value":8,"toc":1094},"minimark",[9,14,29,37,143,148,177,181,187,193,199,205,349,353,358,361,365,760,764,767,771,778,901,905,912,916,919,923,926,930,933,937,963,967,973,979,985,991,995,1007,1016,1025,1034,1043,1052,1056,1079,1084,1087,1090],[10,11,13],"h1",{"id":12},"how-to-choose-avif-and-webp-quality-settings","How to Choose AVIF and WebP Quality Settings",[15,16,17,18,23,24,28],"p",{},"This guide refines ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002F","Serving AVIF and WebP with Fallbacks",", within ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002F","Image & Media Optimization",". Switching to AVIF or WebP saves bytes only if the quality settings are chosen well. Too high, and modern formats lose much of their advantage over JPEG; too low, and artefacts appear — blurred textures, banding in gradients, smeared text. Most teams pick a number once (\"AVIF 50, WebP 75\") and apply it to everything, which over-compresses detailed photos and under-compresses simple graphics.",[15,30,31,32,36],{},"Quality numbers are not comparable across formats or even encoders, and the same number produces very different visual quality on a product shot, a screenshot and a sunset. The reliable approach is to target a ",[33,34,35],"em",{},"perceptual"," quality level, measured with metrics designed to match human judgement, and find the lowest setting per format and content type that reaches it.",[15,38,39],{},[40,41,47,48,47,55,47,59,47,62,47,71,47,77,47,84,47,93,47,98,47,102,47,106,47,110,47,114,47,118,47,122,47,126,47,133,47,137,47],"svg",{"viewBox":42,"width":43,"role":44,"ariaLabel":45,"style":46},"0 0 760 220","100%","img","Bar chart of file sizes for one product photo in JPEG, WebP and AVIF when each is tuned to the same perceptual quality score.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[49,50],"rect",{"className":51,"x":53,"y":53,"width":43,"height":43,"fill":54},[52],"svg-canvas","0","#ffffff",[56,57,58],"title",{},"Bytes at equal perceptual quality (1200px product photo)",[60,61,45],"desc",{},[49,63],{"x":64,"y":64,"width":65,"height":66,"rx":67,"fill":68,"stroke":69,"style":70},"1","758","218","10","none","currentColor","stroke-opacity:0.18",[72,73,58],"text",{"x":74,"y":75,"fill":69,"style":76},"28.0","34.0","font-size:16px;font-weight:700",[72,78,83],{"x":79,"y":80,"fill":69,"style":81,"textAnchor":82},"184.2","70.0","font-size:13px","end","JPEG (mozjpeg q80)",[49,85],{"x":86,"y":87,"width":88,"height":89,"rx":90,"fill":91,"stroke":91,"style":92},"196.2","56.0","471.8","19","3","#0466c8","fill-opacity:0.55;stroke-opacity:0.9",[72,94,97],{"x":95,"y":80,"fill":69,"style":96},"674.0","font-size:12px;font-weight:600","168KB",[72,99,101],{"x":79,"y":100,"fill":69,"style":81,"textAnchor":82},"101.0","WebP (q78)",[49,103],{"x":86,"y":104,"width":105,"height":89,"rx":90,"fill":91,"stroke":91,"style":92},"87.0","339.8",[72,107,109],{"x":108,"y":100,"fill":69,"style":96},"542.0","121KB",[72,111,113],{"x":79,"y":112,"fill":69,"style":81,"textAnchor":82},"132.0","AVIF (q55, speed 4)",[49,115],{"x":86,"y":116,"width":117,"height":89,"rx":90,"fill":91,"stroke":91,"style":92},"118.0","235.9",[72,119,121],{"x":120,"y":112,"fill":69,"style":96},"438.1","84KB",[72,123,125],{"x":79,"y":124,"fill":69,"style":81,"textAnchor":82},"163.0","AVIF (one-size-fits-all q40)",[49,127],{"x":86,"y":128,"width":129,"height":89,"rx":90,"fill":130,"stroke":131,"style":132},"149.0","171.3","#ffc300","#b8860b","fill-opacity:0.7;stroke-opacity:0.9",[72,134,136],{"x":135,"y":124,"fill":69,"style":96},"373.5","61KB",[72,138,142],{"x":74,"y":139,"fill":140,"style":141},"198.0","#51617a","font-size:12.5px","The last bar is smaller but falls below the quality target, with visible texture loss.",[144,145,147],"h2",{"id":146},"rapid-diagnosis","Rapid Diagnosis",[149,150,151,159,165,171],"ul",{},[152,153,154,158],"li",{},[155,156,157],"strong",{},"Check your current settings"," in the build pipeline or image CDN configuration; note whether one value applies to everything.",[152,160,161,164],{},[155,162,163],{},"Spot-check outputs"," at 100% zoom on a high-DPR display: textures (fabric, foliage), gradients (skies) and text (screenshots, labels).",[152,166,167,170],{},[155,168,169],{},"Compare sizes across content types."," If screenshots and illustrations are as large as photos, settings are not tuned per type.",[152,172,173,176],{},[155,174,175],{},"Check encoder speed settings."," Very fast AVIF settings produce larger files at the same quality.",[144,178,180],{"id":179},"root-cause-analysis","Root Cause Analysis",[15,182,183,186],{},[155,184,185],{},"1. One global quality value."," Different content needs different settings to reach the same perceived quality.",[15,188,189,192],{},[155,190,191],{},"2. Quality numbers are encoder-specific."," \"Quality 60\" in one AVIF encoder is not the same as in another, or as WebP 60.",[15,194,195,198],{},[155,196,197],{},"3. Eyeballing on low-DPI screens."," Artefacts invisible on a laptop at 1x can be obvious on phones at 3x zoom levels.",[15,200,201,204],{},[155,202,203],{},"4. Ignoring encoder effort."," Faster AVIF speed settings trade compression efficiency for build time.",[15,206,207],{},[40,208,47,211,47,214,47,217,47,219,47,222,47,224,47,229,47,236,47,240,47,245,47,248,47,252,47,255,47,259,47,263,47,267,47,269,47,273,47,275,47,278,47,280,47,283,47,286,47,290,47,292,47,295,47,297,47,300,47,302,47,305,47,308,47,312,47,314,47,317,47,319,47,322,47,324,47,327,47,330,47,334,47,336,47,339,47,341,47,344,47,346,47],{"viewBox":209,"width":43,"role":44,"ariaLabel":210,"style":46},"0 0 760 228","Starting AVIF and WebP quality settings for different kinds of images, to be validated with perceptual metrics.",[49,212],{"className":213,"x":53,"y":53,"width":43,"height":43,"fill":54},[52],[56,215,216],{},"Starting quality settings by content type",[60,218,210],{},[49,220],{"x":64,"y":64,"width":65,"height":221,"rx":67,"fill":68,"stroke":69,"style":70},"226",[72,223,216],{"x":74,"y":75,"fill":69,"style":76},[49,225],{"x":74,"y":87,"width":226,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},"156.9","30.0","fill-opacity:0.06;stroke-opacity:0.4",[72,230,235],{"x":231,"y":232,"fill":69,"style":233,"textAnchor":234},"38.0","75.5","font-size:12.5px;font-weight:700","start","Content",[49,237],{"x":238,"y":87,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},"184.9","182.4",[72,241,244],{"x":242,"y":232,"fill":69,"style":233,"textAnchor":243},"276.1","middle","AVIF (sharp quality)",[49,246],{"x":247,"y":87,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},"367.3",[72,249,251],{"x":250,"y":232,"fill":69,"style":233,"textAnchor":243},"458.5","WebP quality",[49,253],{"x":254,"y":87,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},"549.6",[72,256,258],{"x":257,"y":232,"fill":69,"style":233,"textAnchor":243},"640.8","Watch for",[49,260],{"x":74,"y":261,"width":226,"height":227,"rx":53,"fill":68,"stroke":69,"style":262},"86.0","stroke-opacity:0.35",[72,264,266],{"x":231,"y":265,"fill":69,"style":233,"textAnchor":234},"105.5","Product photos",[49,268],{"x":238,"y":261,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},[72,270,272],{"x":242,"y":265,"fill":69,"style":271,"textAnchor":243},"font-size:12px","50-60",[49,274],{"x":247,"y":261,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},[72,276,277],{"x":250,"y":265,"fill":69,"style":271,"textAnchor":243},"75-82",[49,279],{"x":254,"y":261,"width":239,"height":227,"rx":53,"fill":68,"stroke":69,"style":262},[72,281,282],{"x":257,"y":265,"fill":69,"style":271,"textAnchor":243},"texture loss",[49,284],{"x":74,"y":285,"width":226,"height":227,"rx":53,"fill":68,"stroke":69,"style":262},"116.0",[72,287,289],{"x":231,"y":288,"fill":69,"style":233,"textAnchor":234},"135.5","Hero photography",[49,291],{"x":238,"y":285,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},[72,293,294],{"x":242,"y":288,"fill":69,"style":271,"textAnchor":243},"45-55",[49,296],{"x":247,"y":285,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},[72,298,299],{"x":250,"y":288,"fill":69,"style":271,"textAnchor":243},"72-80",[49,301],{"x":254,"y":285,"width":239,"height":227,"rx":53,"fill":68,"stroke":69,"style":262},[72,303,304],{"x":257,"y":288,"fill":69,"style":271,"textAnchor":243},"banding in skies",[49,306],{"x":74,"y":307,"width":226,"height":227,"rx":53,"fill":68,"stroke":69,"style":262},"146.0",[72,309,311],{"x":231,"y":310,"fill":69,"style":233,"textAnchor":234},"165.5","Screenshots \u002F UI",[49,313],{"x":238,"y":307,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},[72,315,316],{"x":242,"y":310,"fill":69,"style":271,"textAnchor":243},"60-70 or lossless",[49,318],{"x":247,"y":307,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},[72,320,321],{"x":250,"y":310,"fill":69,"style":271,"textAnchor":243},"85+ or lossless",[49,323],{"x":254,"y":307,"width":239,"height":227,"rx":53,"fill":68,"stroke":69,"style":262},[72,325,326],{"x":257,"y":310,"fill":69,"style":271,"textAnchor":243},"smeared text",[49,328],{"x":74,"y":329,"width":226,"height":227,"rx":53,"fill":68,"stroke":69,"style":262},"176.0",[72,331,333],{"x":231,"y":332,"fill":69,"style":233,"textAnchor":234},"195.5","Illustrations \u002F flat colour",[49,335],{"x":238,"y":329,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},[72,337,338],{"x":242,"y":332,"fill":69,"style":271,"textAnchor":243},"40-55",[49,340],{"x":247,"y":329,"width":239,"height":227,"rx":53,"fill":69,"stroke":69,"style":228},[72,342,343],{"x":250,"y":332,"fill":69,"style":271,"textAnchor":243},"75-80",[49,345],{"x":254,"y":329,"width":239,"height":227,"rx":53,"fill":68,"stroke":69,"style":262},[72,347,348],{"x":257,"y":332,"fill":69,"style":271,"textAnchor":243},"edge ringing",[144,350,352],{"id":351},"step-by-step-resolution","Step-by-Step Resolution",[354,355,357],"h3",{"id":356},"_1-pick-a-perceptual-metric-and-target","1. Pick a perceptual metric and target",[15,359,360],{},"Use SSIMULACRA2 or Butteraugli (both designed to correlate with human perception). A SSIMULACRA2 score around 70–80 is often considered high quality for web photos; choose a target with design stakeholders by reviewing samples.",[354,362,364],{"id":363},"_2-search-for-the-lowest-setting-that-meets-the-target","2. Search for the lowest setting that meets the target",[366,367,372],"pre",{"className":368,"code":369,"language":370,"meta":371,"style":371},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F scripts\u002Ftune-quality.mjs — binary search AVIF quality to reach a SSIMULACRA2 target.\nimport sharp from 'sharp';\nimport { execFileSync } from 'node:child_process';\nasync function score(refPath, buf) {\n  await sharp(buf).png().toFile('\u002Ftmp\u002Fcandidate.png');\n  return Number(execFileSync('ssimulacra2', [refPath, '\u002Ftmp\u002Fcandidate.png']).toString().trim());\n}\nexport async function tune(refPath, target = 75) {\n  let lo = 20, hi = 90, best = hi;\n  while (lo \u003C= hi) {\n    const q = Math.floor((lo + hi) \u002F 2);\n    const buf = await sharp(refPath).avif({ quality: q, effort: 4 }).toBuffer();\n    if (await score(refPath, buf) >= target) { best = q; hi = q - 1; } else { lo = q + 1; }\n  }\n  return best;\n}\n\u002F\u002F trade-off: per-image tuning is expensive; run it on a representative sample\n\u002F\u002F per content type to choose settings, rather than for every image in the build.\n","javascript","",[373,374,375,384,405,420,449,478,516,522,554,585,600,634,670,729,735,743,748,754],"code",{"__ignoreMap":371},[376,377,380],"span",{"class":378,"line":379},"line",1,[376,381,383],{"class":382},"sjfSM","\u002F\u002F scripts\u002Ftune-quality.mjs — binary search AVIF quality to reach a SSIMULACRA2 target.\n",[376,385,387,391,395,398,402],{"class":378,"line":386},2,[376,388,390],{"class":389},"sPARh","import",[376,392,394],{"class":393},"saISM"," sharp ",[376,396,397],{"class":389},"from",[376,399,401],{"class":400},"sZ8jY"," 'sharp'",[376,403,404],{"class":393},";\n",[376,406,408,410,413,415,418],{"class":378,"line":407},3,[376,409,390],{"class":389},[376,411,412],{"class":393}," { execFileSync } ",[376,414,397],{"class":389},[376,416,417],{"class":400}," 'node:child_process'",[376,419,404],{"class":393},[376,421,423,426,429,433,436,440,443,446],{"class":378,"line":422},4,[376,424,425],{"class":389},"async",[376,427,428],{"class":389}," function",[376,430,432],{"class":431},"smZ65"," score",[376,434,435],{"class":393},"(",[376,437,439],{"class":438},"sQw3B","refPath",[376,441,442],{"class":393},", ",[376,444,445],{"class":438},"buf",[376,447,448],{"class":393},") {\n",[376,450,452,455,458,461,464,467,470,472,475],{"class":378,"line":451},5,[376,453,454],{"class":389},"  await",[376,456,457],{"class":431}," sharp",[376,459,460],{"class":393},"(buf).",[376,462,463],{"class":431},"png",[376,465,466],{"class":393},"().",[376,468,469],{"class":431},"toFile",[376,471,435],{"class":393},[376,473,474],{"class":400},"'\u002Ftmp\u002Fcandidate.png'",[376,476,477],{"class":393},");\n",[376,479,481,484,487,489,492,494,497,500,502,505,508,510,513],{"class":378,"line":480},6,[376,482,483],{"class":389},"  return",[376,485,486],{"class":431}," Number",[376,488,435],{"class":393},[376,490,491],{"class":431},"execFileSync",[376,493,435],{"class":393},[376,495,496],{"class":400},"'ssimulacra2'",[376,498,499],{"class":393},", [refPath, ",[376,501,474],{"class":400},[376,503,504],{"class":393},"]).",[376,506,507],{"class":431},"toString",[376,509,466],{"class":393},[376,511,512],{"class":431},"trim",[376,514,515],{"class":393},"());\n",[376,517,519],{"class":378,"line":518},7,[376,520,521],{"class":393},"}\n",[376,523,525,528,531,533,536,538,540,542,545,548,552],{"class":378,"line":524},8,[376,526,527],{"class":389},"export",[376,529,530],{"class":389}," async",[376,532,428],{"class":389},[376,534,535],{"class":431}," tune",[376,537,435],{"class":393},[376,539,439],{"class":438},[376,541,442],{"class":393},[376,543,544],{"class":438},"target",[376,546,547],{"class":389}," =",[376,549,551],{"class":550},"sPXB4"," 75",[376,553,448],{"class":393},[376,555,557,560,563,566,569,572,574,577,580,582],{"class":378,"line":556},9,[376,558,559],{"class":389},"  let",[376,561,562],{"class":393}," lo ",[376,564,565],{"class":389},"=",[376,567,568],{"class":550}," 20",[376,570,571],{"class":393},", hi ",[376,573,565],{"class":389},[376,575,576],{"class":550}," 90",[376,578,579],{"class":393},", best ",[376,581,565],{"class":389},[376,583,584],{"class":393}," hi;\n",[376,586,588,591,594,597],{"class":378,"line":587},10,[376,589,590],{"class":389},"  while",[376,592,593],{"class":393}," (lo ",[376,595,596],{"class":389},"\u003C=",[376,598,599],{"class":393}," hi) {\n",[376,601,603,606,609,611,614,617,620,623,626,629,632],{"class":378,"line":602},11,[376,604,605],{"class":389},"    const",[376,607,608],{"class":550}," q",[376,610,547],{"class":389},[376,612,613],{"class":393}," Math.",[376,615,616],{"class":431},"floor",[376,618,619],{"class":393},"((lo ",[376,621,622],{"class":389},"+",[376,624,625],{"class":393}," hi) ",[376,627,628],{"class":389},"\u002F",[376,630,631],{"class":550}," 2",[376,633,477],{"class":393},[376,635,637,639,642,644,647,649,652,655,658,661,664,667],{"class":378,"line":636},12,[376,638,605],{"class":389},[376,640,641],{"class":550}," buf",[376,643,547],{"class":389},[376,645,646],{"class":389}," await",[376,648,457],{"class":431},[376,650,651],{"class":393},"(refPath).",[376,653,654],{"class":431},"avif",[376,656,657],{"class":393},"({ quality: q, effort: ",[376,659,660],{"class":550},"4",[376,662,663],{"class":393}," }).",[376,665,666],{"class":431},"toBuffer",[376,668,669],{"class":393},"();\n",[376,671,673,676,679,682,684,687,690,693,695,698,700,703,706,709,712,715,718,720,722,724,726],{"class":378,"line":672},13,[376,674,675],{"class":389},"    if",[376,677,678],{"class":393}," (",[376,680,681],{"class":389},"await",[376,683,432],{"class":431},[376,685,686],{"class":393},"(refPath, buf) ",[376,688,689],{"class":389},">=",[376,691,692],{"class":393}," target) { best ",[376,694,565],{"class":389},[376,696,697],{"class":393}," q; hi ",[376,699,565],{"class":389},[376,701,702],{"class":393}," q ",[376,704,705],{"class":389},"-",[376,707,708],{"class":550}," 1",[376,710,711],{"class":393},"; } ",[376,713,714],{"class":389},"else",[376,716,717],{"class":393}," { lo ",[376,719,565],{"class":389},[376,721,702],{"class":393},[376,723,622],{"class":389},[376,725,708],{"class":550},[376,727,728],{"class":393},"; }\n",[376,730,732],{"class":378,"line":731},14,[376,733,734],{"class":393},"  }\n",[376,736,738,740],{"class":378,"line":737},15,[376,739,483],{"class":389},[376,741,742],{"class":393}," best;\n",[376,744,746],{"class":378,"line":745},16,[376,747,521],{"class":393},[376,749,751],{"class":378,"line":750},17,[376,752,753],{"class":382},"\u002F\u002F trade-off: per-image tuning is expensive; run it on a representative sample\n",[376,755,757],{"class":378,"line":756},18,[376,758,759],{"class":382},"\u002F\u002F per content type to choose settings, rather than for every image in the build.\n",[354,761,763],{"id":762},"_3-apply-settings-per-content-type","3. Apply settings per content type",[15,765,766],{},"Classify images (by folder, CMS field or tag) and apply the tuned setting per class in the pipeline or as image CDN presets.",[354,768,770],{"id":769},"_4-choose-encoder-effort-for-your-build-budget","4. Choose encoder effort for your build budget",[15,772,773,774,777],{},"For AVIF in sharp, ",[373,775,776],{},"effort"," 4–6 is a common balance; higher effort shrinks files a few percent more at much longer encode times. Cache outputs so the cost is paid once per image.",[15,779,780],{},[40,781,47,784,47,787,47,790,47,792,47,809,47,812,47,814,47,820,47,826,47,830,47,834,47,837,47,841,47,844,47,847,47,851,47,855,47,858,47,861,47,864,47,868,47,871,47,874,47,878,47,881,47,889,47,893,47,897,47],{"viewBox":782,"width":43,"role":44,"ariaLabel":783,"style":46},"0 0 760 149","Workflow from sampling images per content type through perceptual scoring to per-class encoder settings.",[49,785],{"className":786,"x":53,"y":53,"width":43,"height":43,"fill":54},[52],[56,788,789],{},"Quality tuning workflow",[60,791,783],{},[793,794,795],"defs",{},[796,797,804],"marker",{"id":798,"viewBox":799,"refX":800,"refY":801,"markerWidth":802,"markerHeight":802,"orient":803},"fa46b4f702","0 0 10 10","9","5","7","auto-start-reverse",[805,806],"path",{"d":807,"fill":69,"style":808},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[49,810],{"x":64,"y":64,"width":65,"height":811,"rx":67,"fill":68,"stroke":69,"style":70},"147",[72,813,789],{"x":74,"y":75,"fill":69,"style":76},[49,815],{"x":74,"y":87,"width":816,"height":817,"rx":818,"fill":91,"stroke":91,"style":819},"108.8","71.0","6","fill-opacity:0.14;stroke-opacity:0.9",[72,821,825],{"x":822,"y":823,"fill":69,"style":824,"textAnchor":243},"82.4","78.0","font-size:13px;font-weight:700","Sample",[72,827,829],{"x":822,"y":828,"fill":69,"style":271,"textAnchor":243},"96.0","20-50 images per",[72,831,833],{"x":822,"y":832,"fill":69,"style":271,"textAnchor":243},"112.0","type",[49,835],{"x":836,"y":87,"width":816,"height":817,"rx":818,"fill":91,"stroke":91,"style":819},"176.8",[72,838,840],{"x":839,"y":823,"fill":69,"style":824,"textAnchor":243},"231.2","Target",[72,842,843],{"x":839,"y":828,"fill":69,"style":271,"textAnchor":243},"perceptual score",[72,845,846],{"x":839,"y":832,"fill":69,"style":271,"textAnchor":243},"agreed",[49,848],{"x":849,"y":87,"width":816,"height":817,"rx":818,"fill":130,"stroke":131,"style":850},"325.6","fill-opacity:0.24;stroke-opacity:0.9",[72,852,854],{"x":853,"y":823,"fill":69,"style":824,"textAnchor":243},"380.0","Search",[72,856,857],{"x":853,"y":828,"fill":69,"style":271,"textAnchor":243},"lowest passing",[72,859,860],{"x":853,"y":832,"fill":69,"style":271,"textAnchor":243},"quality",[49,862],{"x":863,"y":87,"width":816,"height":817,"rx":818,"fill":91,"stroke":91,"style":819},"474.4",[72,865,867],{"x":866,"y":823,"fill":69,"style":824,"textAnchor":243},"528.8","Apply",[72,869,870],{"x":866,"y":828,"fill":69,"style":271,"textAnchor":243},"per-class presets",[49,872],{"x":873,"y":87,"width":816,"height":817,"rx":818,"fill":91,"stroke":91,"style":819},"623.2",[72,875,877],{"x":876,"y":823,"fill":69,"style":824,"textAnchor":243},"677.6","Re-check",[72,879,880],{"x":876,"y":828,"fill":69,"style":271,"textAnchor":243},"quarterly",[378,882],{"x1":883,"y1":884,"x2":885,"y2":884,"stroke":69,"strokeWidth":886,"style":887,"markerEnd":888},"136.8","91.5","174.8","1.5","stroke-opacity:0.6","url(#fa46b4f702)",[378,890],{"x1":891,"y1":884,"x2":892,"y2":884,"stroke":69,"strokeWidth":886,"style":887,"markerEnd":888},"285.6","323.6",[378,894],{"x1":895,"y1":884,"x2":896,"y2":884,"stroke":69,"strokeWidth":886,"style":887,"markerEnd":888},"434.4","472.4",[378,898],{"x1":899,"y1":884,"x2":900,"y2":884,"stroke":69,"strokeWidth":886,"style":887,"markerEnd":888},"583.2","621.2",[144,902,904],{"id":903},"verification","Verification",[15,906,907,908,911],{},"Compare total image bytes per page before and after, review a sample visually at high zoom with stakeholders, and keep the perceptual score distribution for each class above the target. In RUM, LCP image ",[373,909,910],{},"resourceLoadDuration"," should fall in proportion to the byte savings.",[144,913,915],{"id":914},"worked-example-an-online-furniture-store","Worked Example: An Online Furniture Store",[15,917,918],{},"An online furniture store used AVIF quality 40 for everything. Fabric textures on sofas looked blurry on high-DPR phones and returns mentioning \"colour\u002Ftexture not as pictured\" rose. A tuning pass with SSIMULACRA2 found product photos needed quality 58 to meet the agreed target, while lifestyle backgrounds passed at 46 and line-drawing diagrams at 35. Applying per-class presets increased product image bytes by 18% but reduced backgrounds and diagrams by 22% and 30%; total image weight per product page was roughly unchanged, while texture complaints dropped noticeably.",[144,920,922],{"id":921},"lossless-and-near-lossless-cases","Lossless and Near-Lossless Cases",[15,924,925],{},"Some content should not be lossy at all. Screenshots of UI, diagrams with thin lines, and images containing small text often look worse with lossy AVIF than with lossless WebP or PNG at a similar size. WebP's lossless mode and AVIF's lossless or high-quality modes with 4:4:4 chroma subsampling preserve sharp coloured edges that 4:2:0 subsampling blurs. Classify such images separately and test lossless output — it is often surprisingly competitive in size for flat-colour content.",[144,927,929],{"id":928},"getting-sign-off-on-a-quality-target","Getting Sign-Off on a Quality Target",[15,931,932],{},"Choosing quality settings is partly a people problem: designers and merchandisers own how images look, while engineers own how much they weigh. A short review session settles it. Pick ten representative images per content type, encode each at four or five settings, and show them side by side at real display size on the devices your customers use, with file sizes hidden. Ask reviewers to mark the lowest version they would accept. Then translate their choice into a perceptual score, and make that score — not the encoder number — the agreed standard, written into the pipeline's configuration with a comment linking to the review. When encoders change or a new content type appears, re-run the search against the same score instead of reopening the debate. This turns a subjective argument into a repeatable check that a CI job can enforce on a sample of new uploads.",[144,934,936],{"id":935},"common-mistakes","Common Mistakes",[149,938,939,945,951,957],{},[152,940,941,944],{},[155,942,943],{},"Comparing quality numbers across formats."," WebP 75 and AVIF 75 are unrelated scales.",[152,946,947,950],{},[155,948,949],{},"Judging on a 1x display."," Review on high-DPR screens where artefacts are visible.",[152,952,953,956],{},[155,954,955],{},"Using fastest AVIF settings in production builds."," Larger files for the same quality.",[152,958,959,962],{},[155,960,961],{},"Never revisiting settings."," Encoders improve; re-tune occasionally.",[144,964,966],{"id":965},"edge-cases","Edge Cases",[15,968,969,972],{},[155,970,971],{},"Chroma subsampling."," 4:2:0 saves bytes but blurs saturated edges; use 4:4:4 for graphics with coloured text.",[15,974,975,978],{},[155,976,977],{},"Gradients and banding."," Smooth gradients band at low quality; slightly higher quality or dithering helps.",[15,980,981,984],{},[155,982,983],{},"Image CDNs with auto quality."," Some CDNs choose quality per image automatically using perceptual heuristics; validate their output against your target.",[15,986,987,990],{},[155,988,989],{},"Thumbnails vs full size."," Small thumbnails tolerate lower quality than zoomable product images; tune per usage.",[144,992,994],{"id":993},"faq","FAQ",[996,997,1000,1004],"details",{"className":998},[999],"faq-item",[1001,1002,1003],"summary",{},"What AVIF quality should I use?",[15,1005,1006],{},"There is no single answer; it depends on content and encoder. As a starting point with sharp, 50–60 for photos and higher (or lossless) for screenshots, then validate with a perceptual metric.",[996,1008,1010,1013],{"className":1009},[999],[1001,1011,1012],{},"Is SSIM or PSNR good enough?",[15,1014,1015],{},"They correlate poorly with human judgement for modern codecs. SSIMULACRA2 and Butteraugli were designed for this purpose and are more reliable for choosing settings.",[996,1017,1019,1022],{"className":1018},[999],[1001,1020,1021],{},"Should WebP be tuned too if AVIF is served first?",[15,1023,1024],{},"Yes — WebP is the fallback for browsers or contexts without AVIF and may be served to a meaningful share of users. Tune it to the same perceptual target.",[996,1026,1028,1031],{"className":1027},[999],[1001,1029,1030],{},"Does higher encoder effort affect decode time?",[15,1032,1033],{},"Generally no; effort affects encoding search, not decoder complexity. Decode cost depends mainly on resolution and format features.",[996,1035,1037,1040],{"className":1036},[999],[1001,1038,1039],{},"How often should I re-tune?",[15,1041,1042],{},"When you change encoders or versions, add new content types, or change design standards — and otherwise perhaps yearly.",[996,1044,1046,1049],{"className":1045},[999],[1001,1047,1048],{},"Can quality differ for mobile and desktop?",[15,1050,1051],{},"You can serve slightly lower quality at higher DPRs (pixels are smaller, artefacts less visible) — some CDNs do this automatically. Validate on real devices.",[144,1053,1055],{"id":1054},"related","Related",[149,1057,1058,1065,1072],{},[152,1059,1060,1064],{},[19,1061,1063],{"href":1062},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Favif-vs-webp-which-format-to-serve\u002F","AVIF vs WebP: which format to serve"," — format choice before quality choice.",[152,1066,1067,1071],{},[19,1068,1070],{"href":1069},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fbatch-converting-images-with-sharp\u002F","Batch-converting images with sharp"," — applying settings at scale.",[152,1073,1074,1078],{},[19,1075,1077],{"href":1076},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Ffixing-blurry-images-on-high-dpi-displays\u002F","Fixing blurry images on high-DPI displays"," — resolution vs quality.",[1080,1081,1083],"script",{"type":1082},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Choose AVIF and WebP Quality Settings\",\n  \"description\": \"A measurable method for choosing image quality settings per content type, so images are as small as possible while staying visually acceptable.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Pick a perceptual metric and target\",\n      \"text\": \"Use SSIMULACRA2 or Butteraugli (both designed to correlate with human perception).\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Search for the lowest setting that meets the target\",\n      \"text\": \"Search for the lowest setting that meets the target\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Apply settings per content type\",\n      \"text\": \"Classify images (by folder, CMS field or tag) and apply the tuned setting per class in the pipeline or as image CDN presets.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Choose encoder effort for your build budget\",\n      \"text\": \"For AVIF in sharp, effort 4–6 is a common balance; higher effort shrinks files a few percent more at much longer encode times.\"\n    }\n  ]\n}\n",[1080,1085,1086],{"type":1082},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Choose AVIF and WebP Quality Settings\",\n  \"description\": \"A measurable method for choosing image quality settings per content type, so images are as small as possible while staying visually acceptable.\",\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\u002Fchoosing-avif-and-webp-quality-settings\u002F\"\n  }\n}\n",[1080,1088,1089],{"type":1082},"\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\": \"Choosing AVIF and WebP Quality Settings\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings\u002F\"\n    }\n  ]\n}\n",[1091,1092,1093],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}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);}",{"title":371,"searchDepth":386,"depth":386,"links":1095},[1096,1097,1098,1104,1105,1106,1107,1108,1109,1110,1111],{"id":146,"depth":386,"text":147},{"id":179,"depth":386,"text":180},{"id":351,"depth":386,"text":352,"children":1099},[1100,1101,1102,1103],{"id":356,"depth":407,"text":357},{"id":363,"depth":407,"text":364},{"id":762,"depth":407,"text":763},{"id":769,"depth":407,"text":770},{"id":903,"depth":386,"text":904},{"id":914,"depth":386,"text":915},{"id":921,"depth":386,"text":922},{"id":928,"depth":386,"text":929},{"id":935,"depth":386,"text":936},{"id":965,"depth":386,"text":966},{"id":993,"depth":386,"text":994},{"id":1054,"depth":386,"text":1055},"A measurable method for choosing image quality settings per content type, so images are as small as possible while staying visually acceptable.","md",{"slug":1115,"type":1116,"breadcrumb":1117,"datePublished":1124,"dateModified":1124},"choosing-avif-and-webp-quality-settings","article",[1118,1120,1121,1122],{"name":1119,"url":628},"Home",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1123},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings",{"title":1128,"description":1129},"Choosing AVIF and WebP Quality Settings by Content","Pick AVIF and WebP quality settings with perceptual metrics like SSIMULACRA2 and Butteraugli instead of guesses, per content type, to cut bytes without visible loss.","image-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fchoosing-avif-and-webp-quality-settings\u002Findex","D9rI6KcQ8hIb4oB3XgBGVBGh1PvMq5irHl6KTRyPGfk",[1133,1137],{"title":1134,"path":1135,"stem":1136},"Batch-Converting Images with sharp","\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fbatch-converting-images-with-sharp","image-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fbatch-converting-images-with-sharp\u002Findex",{"title":1138,"path":1139,"stem":1140},"JPEG XL Support and Fallbacks","\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks","image-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks\u002Findex",1791308075855]