[{"data":1,"prerenderedAt":903},["ShallowReactive",2],{"blog-\u002Fblog\u002F2026\u002Favif-webp-jpg-png-and-picture":3,"blog-project-\u002Fblog\u002F2026\u002Favif-webp-jpg-png-and-picture":890},{"id":4,"title":5,"art":6,"body":7,"date":886,"description":887,"draft":888,"extension":889,"image":890,"kind":891,"meta":892,"navigation":893,"ogImage":894,"path":895,"project":890,"seo":896,"slug":890,"stem":897,"tags":898,"translationKey":901,"updated":890,"__hash__":902},"blog_en\u002Fblog\u002F2026\u002Favif-webp-jpg-png-and-picture.md","AVIF, WebP, JPG or PNG? And when \u003Cpicture> is worth it","\u002Fart\u002Fblog\u002Fformaty-obrazkow.svg",{"type":8,"value":9,"toc":877},"minimark",[10,19,24,27,33,130,135,217,220,240,244,280,287,290,293,297,300,401,418,426,436,441,446,614,620,705,708,751,757,765,789,793,848,851,855,873],[11,12,13,14,18],"p",{},"I use ",[15,16,17],"code",{},"\u003Cpicture>"," almost everywhere – in WordPress and in Vue. I want one thing: a phone, a tablet and a computer should each download an image in the size they really need. More and more often I choose AVIF – now also on this portfolio, with WebP as a fallback. So that I don't write from memory, I measured it on two images from my portfolio.",[20,21,23],"h2",{"id":22},"the-test","The test",[11,25,26],{},"I took two images: the illustration from my portrait (with a transparent background) and a screenshot of my portfolio home page (text, colours, sharp edges). I saved each one in four formats and four widths with the same tool my website uses (sharp 0.34). Settings: lossless PNG, JPG at quality 80, WebP at quality 80, AVIF at quality 50 – with these values the images look similar.",[11,28,29],{},[30,31,32],"strong",{},"Portrait (file size in KB)",[34,35,36,58],"table",{},[37,38,39],"thead",{},[40,41,42,46,49,52,55],"tr",{},[43,44,45],"th",{},"Width",[43,47,48],{},"PNG",[43,50,51],{},"JPG",[43,53,54],{},"WebP",[43,56,57],{},"AVIF",[59,60,61,79,96,113],"tbody",{},[40,62,63,67,70,73,76],{},[64,65,66],"td",{},"400 px",[64,68,69],{},"155",[64,71,72],{},"15.9",[64,74,75],{},"17.0",[64,77,78],{},"9.4",[40,80,81,84,87,90,93],{},[64,82,83],{},"800 px",[64,85,86],{},"519",[64,88,89],{},"45.5",[64,91,92],{},"45.0",[64,94,95],{},"20.5",[40,97,98,101,104,107,110],{},[64,99,100],{},"1200 px",[64,102,103],{},"994",[64,105,106],{},"82.3",[64,108,109],{},"79.1",[64,111,112],{},"32.0",[40,114,115,118,121,124,127],{},[64,116,117],{},"1600 px",[64,119,120],{},"1603",[64,122,123],{},"123.8",[64,125,126],{},"115.2",[64,128,129],{},"43.2",[11,131,132],{},[30,133,134],{},"Page screenshot (file size in KB)",[34,136,137,151],{},[37,138,139],{},[40,140,141,143,145,147,149],{},[43,142,45],{},[43,144,48],{},[43,146,51],{},[43,148,54],{},[43,150,57],{},[59,152,153,169,185,201],{},[40,154,155,157,160,163,166],{},[64,156,66],{},[64,158,159],{},"63.4",[64,161,162],{},"9.1",[64,164,165],{},"7.5",[64,167,168],{},"5.0",[40,170,171,173,176,179,182],{},[64,172,83],{},[64,174,175],{},"210.9",[64,177,178],{},"26.8",[64,180,181],{},"21.7",[64,183,184],{},"12.8",[40,186,187,189,192,195,198],{},[64,188,100],{},[64,190,191],{},"463.2",[64,193,194],{},"50.4",[64,196,197],{},"38.8",[64,199,200],{},"22.3",[40,202,203,205,208,211,214],{},[64,204,117],{},[64,206,207],{},"778.7",[64,209,210],{},"76.9",[64,212,213],{},"57.6",[64,215,216],{},"31.7",[11,218,219],{},"What this shows:",[221,222,223,229,235],"ul",{},[224,225,226,228],"li",{},[30,227,48],{}," is more than ten times heavier than the other formats. It makes sense when an image must stay lossless – for example a small icon or a screenshot for documentation.",[224,230,231,234],{},[30,232,233],{},"JPG and WebP"," are almost the same for the portrait, and for the screenshot with text WebP is about 20–25% lighter. WebP also supports transparency, which JPG doesn't – the portrait in JPG got a white background.",[224,236,237,239],{},[30,238,57],{}," is the lightest: 1.7 to 2.7 times smaller than WebP. It also supports transparency, and in the screenshot with text the letters in AVIF (quality 50) are as readable as in WebP (quality 80).",[20,241,243],{"id":242},"the-catch-with-avif-encoding-time","The catch with AVIF: encoding time",[34,245,246,261],{},[37,247,248],{},[40,249,250,253,255,257,259],{},[43,251,252],{},"Portrait, 1600 px",[43,254,48],{},[43,256,51],{},[43,258,54],{},[43,260,57],{},[59,262,263],{},[40,264,265,268,271,274,277],{},[64,266,267],{},"Time to save",[64,269,270],{},"247 ms",[64,272,273],{},"267 ms",[64,275,276],{},"360 ms",[64,278,279],{},"5932 ms",[11,281,282,283,286],{},"AVIF takes more than ten times longer to save than the other formats. I saw this on my own website. When the site builds (",[15,284,285],{},"nuxt generate","), @nuxt\u002Fimage creates every version of every image – 876 files per format in my case. With AVIF and WebP this took about 12 minutes, with WebP only – about 1 minute. A visitor downloaded 59 kB of images on the first screen of the home page instead of 120 kB, and the time to load the largest element (LCP) on a phone was about 0.2 s different.",[11,288,289],{},"First I turned AVIF off and stayed with WebP only. Then I brought it back: I add new posts less often now, and the site builds at night, so a longer build doesn't bother me.",[11,291,292],{},"Browser support is no longer a problem: according to caniuse.com (September 2026), about 97% of users can see WebP and about 96% can see AVIF.",[20,294,296],{"id":295},"smaller-versions-srcset-and-sizes","Smaller versions: srcset and sizes",[11,298,299],{},"The biggest saving doesn't come from the format, but from the size. A phone doesn't need a 1600 px image. The portrait in WebP is 45 KB at 800 px and 115 KB at 1600 px. That's why I save every image in a few widths and let the browser choose:",[301,302,307],"pre",{"className":303,"code":304,"language":305,"meta":306,"style":306},"language-html shiki shiki-themes github-light github-dark","\u003Cimg\n  src=\"\u002Fimg\u002Fportret-800.webp\"\n  srcset=\"\u002Fimg\u002Fportret-400.webp 400w, \u002Fimg\u002Fportret-800.webp 800w,\n          \u002Fimg\u002Fportret-1200.webp 1200w, \u002Fimg\u002Fportret-1600.webp 1600w\"\n  sizes=\"(max-width: 640px) 100vw, 50vw\"\n  width=\"800\" height=\"800\" alt=\"Portrait\" loading=\"lazy\">\n","html","",[15,308,309,322,336,347,353,364],{"__ignoreMap":306},[310,311,314,318],"span",{"class":312,"line":313},"line",1,[310,315,317],{"class":316},"sVt8B","\u003C",[310,319,321],{"class":320},"s9eBZ","img\n",[310,323,325,329,332],{"class":312,"line":324},2,[310,326,328],{"class":327},"sScJk","  src",[310,330,331],{"class":316},"=",[310,333,335],{"class":334},"sZZnC","\"\u002Fimg\u002Fportret-800.webp\"\n",[310,337,339,342,344],{"class":312,"line":338},3,[310,340,341],{"class":327},"  srcset",[310,343,331],{"class":316},[310,345,346],{"class":334},"\"\u002Fimg\u002Fportret-400.webp 400w, \u002Fimg\u002Fportret-800.webp 800w,\n",[310,348,350],{"class":312,"line":349},4,[310,351,352],{"class":334},"          \u002Fimg\u002Fportret-1200.webp 1200w, \u002Fimg\u002Fportret-1600.webp 1600w\"\n",[310,354,356,359,361],{"class":312,"line":355},5,[310,357,358],{"class":327},"  sizes",[310,360,331],{"class":316},[310,362,363],{"class":334},"\"(max-width: 640px) 100vw, 50vw\"\n",[310,365,367,370,372,375,378,380,382,385,387,390,393,395,398],{"class":312,"line":366},6,[310,368,369],{"class":327},"  width",[310,371,331],{"class":316},[310,373,374],{"class":334},"\"800\"",[310,376,377],{"class":327}," height",[310,379,331],{"class":316},[310,381,374],{"class":334},[310,383,384],{"class":327}," alt",[310,386,331],{"class":316},[310,388,389],{"class":334},"\"Portrait\"",[310,391,392],{"class":327}," loading",[310,394,331],{"class":316},[310,396,397],{"class":334},"\"lazy\"",[310,399,400],{"class":316},">\n",[221,402,403,409,415],{},[224,404,405,408],{},[15,406,407],{},"srcset"," is a list of files with their widths.",[224,410,411,414],{},[15,412,413],{},"sizes"," tells the browser how wide the image will be on the page: the full screen width on a phone, half of it on bigger screens.",[224,416,417],{},"The browser chooses the file itself and takes pixel density into account. A phone with a 400 px screen and 2× density downloads the 800 px version, not the 1600 px one.",[11,419,420,422,423,425],{},[15,421,413],{}," has to match the real size of the image. On my own website the portrait in the page header had ",[15,424,413],{}," based on the screen width, but the image actually depended on the height of its frame. After the fix, a phone downloads a 732 px file instead of 1076 px.",[20,427,429,431,432,435],{"id":428},"picture-and-source-when-its-worth-it",[15,430,17],{}," and ",[15,433,434],{},"\u003Csource>",": when it's worth it",[11,437,438,440],{},[15,439,17],{}," is useful in two situations.",[11,442,443],{},[30,444,445],{},"1. Several formats – the browser takes the first one it supports:",[301,447,449],{"className":303,"code":448,"language":305,"meta":306,"style":306},"\u003Cpicture>\n  \u003Csource\n    type=\"image\u002Favif\"\n    srcset=\"\u002Fimg\u002Fportret-400.avif 400w, \u002Fimg\u002Fportret-800.avif 800w\"\n    sizes=\"(max-width: 640px) 100vw, 50vw\">\n  \u003Csource\n    type=\"image\u002Fwebp\"\n    srcset=\"\u002Fimg\u002Fportret-400.webp 400w, \u002Fimg\u002Fportret-800.webp 800w\"\n    sizes=\"(max-width: 640px) 100vw, 50vw\">\n  \u003Cimg\n    src=\"\u002Fimg\u002Fportret-800.jpg\"\n    srcset=\"\u002Fimg\u002Fportret-400.jpg 400w, \u002Fimg\u002Fportret-800.jpg 800w\"\n    sizes=\"(max-width: 640px) 100vw, 50vw\"\n    width=\"800\" height=\"800\" alt=\"Portrait\" loading=\"lazy\">\n\u003C\u002Fpicture>\n",[15,450,451,460,468,478,488,500,506,516,526,537,544,555,565,574,604],{"__ignoreMap":306},[310,452,453,455,458],{"class":312,"line":313},[310,454,317],{"class":316},[310,456,457],{"class":320},"picture",[310,459,400],{"class":316},[310,461,462,465],{"class":312,"line":324},[310,463,464],{"class":316},"  \u003C",[310,466,467],{"class":320},"source\n",[310,469,470,473,475],{"class":312,"line":338},[310,471,472],{"class":327},"    type",[310,474,331],{"class":316},[310,476,477],{"class":334},"\"image\u002Favif\"\n",[310,479,480,483,485],{"class":312,"line":349},[310,481,482],{"class":327},"    srcset",[310,484,331],{"class":316},[310,486,487],{"class":334},"\"\u002Fimg\u002Fportret-400.avif 400w, \u002Fimg\u002Fportret-800.avif 800w\"\n",[310,489,490,493,495,498],{"class":312,"line":355},[310,491,492],{"class":327},"    sizes",[310,494,331],{"class":316},[310,496,497],{"class":334},"\"(max-width: 640px) 100vw, 50vw\"",[310,499,400],{"class":316},[310,501,502,504],{"class":312,"line":366},[310,503,464],{"class":316},[310,505,467],{"class":320},[310,507,509,511,513],{"class":312,"line":508},7,[310,510,472],{"class":327},[310,512,331],{"class":316},[310,514,515],{"class":334},"\"image\u002Fwebp\"\n",[310,517,519,521,523],{"class":312,"line":518},8,[310,520,482],{"class":327},[310,522,331],{"class":316},[310,524,525],{"class":334},"\"\u002Fimg\u002Fportret-400.webp 400w, \u002Fimg\u002Fportret-800.webp 800w\"\n",[310,527,529,531,533,535],{"class":312,"line":528},9,[310,530,492],{"class":327},[310,532,331],{"class":316},[310,534,497],{"class":334},[310,536,400],{"class":316},[310,538,540,542],{"class":312,"line":539},10,[310,541,464],{"class":316},[310,543,321],{"class":320},[310,545,547,550,552],{"class":312,"line":546},11,[310,548,549],{"class":327},"    src",[310,551,331],{"class":316},[310,553,554],{"class":334},"\"\u002Fimg\u002Fportret-800.jpg\"\n",[310,556,558,560,562],{"class":312,"line":557},12,[310,559,482],{"class":327},[310,561,331],{"class":316},[310,563,564],{"class":334},"\"\u002Fimg\u002Fportret-400.jpg 400w, \u002Fimg\u002Fportret-800.jpg 800w\"\n",[310,566,568,570,572],{"class":312,"line":567},13,[310,569,492],{"class":327},[310,571,331],{"class":316},[310,573,363],{"class":334},[310,575,577,580,582,584,586,588,590,592,594,596,598,600,602],{"class":312,"line":576},14,[310,578,579],{"class":327},"    width",[310,581,331],{"class":316},[310,583,374],{"class":334},[310,585,377],{"class":327},[310,587,331],{"class":316},[310,589,374],{"class":334},[310,591,384],{"class":327},[310,593,331],{"class":316},[310,595,389],{"class":334},[310,597,392],{"class":327},[310,599,331],{"class":316},[310,601,397],{"class":334},[310,603,400],{"class":316},[310,605,607,610,612],{"class":312,"line":606},15,[310,608,609],{"class":316},"\u003C\u002F",[310,611,457],{"class":320},[310,613,400],{"class":316},[11,615,616,619],{},[30,617,618],{},"2. A different crop on a phone"," – for example a vertical photo instead of a wide one:",[301,621,623],{"className":303,"code":622,"language":305,"meta":306,"style":306},"\u003Cpicture>\n  \u003Csource media=\"(max-width: 640px)\" srcset=\"\u002Fimg\u002Fhero-vertical.webp\">\n  \u003Cimg src=\"\u002Fimg\u002Fhero-wide.webp\" width=\"1600\" height=\"700\" alt=\"…\">\n\u003C\u002Fpicture>\n",[15,624,625,633,658,697],{"__ignoreMap":306},[310,626,627,629,631],{"class":312,"line":313},[310,628,317],{"class":316},[310,630,457],{"class":320},[310,632,400],{"class":316},[310,634,635,637,640,643,645,648,651,653,656],{"class":312,"line":324},[310,636,464],{"class":316},[310,638,639],{"class":320},"source",[310,641,642],{"class":327}," media",[310,644,331],{"class":316},[310,646,647],{"class":334},"\"(max-width: 640px)\"",[310,649,650],{"class":327}," srcset",[310,652,331],{"class":316},[310,654,655],{"class":334},"\"\u002Fimg\u002Fhero-vertical.webp\"",[310,657,400],{"class":316},[310,659,660,662,665,668,670,673,676,678,681,683,685,688,690,692,695],{"class":312,"line":338},[310,661,464],{"class":316},[310,663,664],{"class":320},"img",[310,666,667],{"class":327}," src",[310,669,331],{"class":316},[310,671,672],{"class":334},"\"\u002Fimg\u002Fhero-wide.webp\"",[310,674,675],{"class":327}," width",[310,677,331],{"class":316},[310,679,680],{"class":334},"\"1600\"",[310,682,377],{"class":327},[310,684,331],{"class":316},[310,686,687],{"class":334},"\"700\"",[310,689,384],{"class":327},[310,691,331],{"class":316},[310,693,694],{"class":334},"\"…\"",[310,696,400],{"class":316},[310,698,699,701,703],{"class":312,"line":349},[310,700,609],{"class":316},[310,702,457],{"class":320},[310,704,400],{"class":316},[11,706,707],{},"What does it cost? I measured the HTML itself for four widths:",[34,709,710,727],{},[37,711,712],{},[40,713,714,716,722],{},[43,715],{},[43,717,718,721],{},[15,719,720],{},"\u003Cimg srcset>"," (1 format)",[43,723,724,726],{},[15,725,17],{}," (AVIF + WebP + JPG)",[59,728,729,740],{},[40,730,731,734,737],{},[64,732,733],{},"HTML",[64,735,736],{},"250 B",[64,738,739],{},"652 B",[40,741,742,745,748],{},[64,743,744],{},"HTML after compression (gzip)",[64,746,747],{},"158 B",[64,749,750],{},"232 B",[11,752,753,754,756],{},"After compression, ",[15,755,17],{}," adds about 75 bytes to the page for each image. In return, the browser downloads the 800 px portrait in AVIF (20.5 KB) instead of WebP (45 KB) – about 24 KB less. So those 75 bytes don't matter. The real cost is somewhere else: three times more files on the server (AVIF, WebP and JPG) and longer builds.",[11,758,759],{},[30,760,761,762,764],{},"When ",[15,763,17],{}," doesn't make sense:",[221,766,767,783,786],{},[224,768,769,770,773,774,776,777,779,780,782],{},"when you use only one format – ",[15,771,772],{},"\u003Cimg>"," with ",[15,775,407],{}," is enough, and ",[15,778,17],{}," with one ",[15,781,434],{}," gives you nothing;",[224,784,785],{},"for icons and logos – SVG is better;",[224,787,788],{},"when build time matters and AVIF has to be generated for hundreds of images.",[20,790,792],{"id":791},"my-cheat-sheet","My cheat sheet",[34,794,795,805],{},[37,796,797],{},[40,798,799,802],{},[43,800,801],{},"What",[43,803,804],{},"Format",[59,806,807,817,825,833,841],{},[40,808,809,812],{},[64,810,811],{},"Photos, illustrations, transparency, screenshots with text",[64,813,814,815],{},"AVIF, with WebP as a fallback in ",[15,816,17],{},[40,818,819,822],{},[64,820,821],{},"A pixel-perfect screenshot, with or without transparency (e.g. for documentation)",[64,823,824],{},"PNG or lossless WebP",[40,826,827,830],{},[64,828,829],{},"A preview for a client by email",[64,831,832],{},"JPG – you can't see the difference, and the file fits in an email",[40,834,835,838],{},[64,836,837],{},"Icons and logos",[64,839,840],{},"SVG",[40,842,843,846],{},[64,844,845],{},"Link preview image (OG) for social media",[64,847,51],{},[11,849,850],{},"So AVIF is my default format. JPG stays for two things: link previews, because Facebook and LinkedIn don't always show AVIF, and previews I send to clients by email.",[20,852,854],{"id":853},"what-i-got-from-it","What I got from it",[221,856,857,865,868],{},[224,858,859,860,431,862,864],{},"A good size (",[15,861,407],{},[15,863,413],{},") gives the most, the format comes second.",[224,866,867],{},"AVIF is the lightest and works for everything – photos, transparency and screenshots with text. But it takes more than ten times longer to save, so with many images you see it in the build time.",[224,869,870,872],{},[15,871,17],{}," adds a few dozen bytes of HTML per image and saves a few dozen kilobytes. It's worth it when you have more than one format or a different crop for phones.",[874,875,876],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"title":306,"searchDepth":324,"depth":324,"links":878},[879,880,881,882,884,885],{"id":22,"depth":324,"text":23},{"id":242,"depth":324,"text":243},{"id":295,"depth":324,"text":296},{"id":428,"depth":324,"text":883},"\u003Cpicture> and \u003Csource>: when it's worth it",{"id":791,"depth":324,"text":792},{"id":853,"depth":324,"text":854},"2026-10-20","A guide with real numbers – the same images in four formats and four widths. Which format to choose, why smaller versions matter, and when \u003Cpicture> with several \u003Csource> elements makes sense and when it only makes the page bigger.",false,"md",null,"post",{},true,"\u002Fog\u002Fblog\u002Fformaty-obrazkow-en.jpg","\u002Fblog\u002F2026\u002Favif-webp-jpg-png-and-picture",{"title":5,"description":887},"blog\u002F2026\u002Favif-webp-jpg-png-and-picture",[899,305,900],"performance","images","avif-webp-jpg-png-i-picture","EJ-BDCuTH8R--JHTkE3uaOfWqYwZFgKTIkUSmfada1U",1792530786808]