[{"data":1,"prerenderedAt":901},["ShallowReactive",2],{"blog-\u002Fpl\u002Fblog\u002F2026\u002Favif-webp-jpg-png-i-picture":3,"blog-project-\u002Fpl\u002Fblog\u002F2026\u002Favif-webp-jpg-png-i-picture":889},{"id":4,"title":5,"art":6,"body":7,"date":885,"description":886,"draft":887,"extension":888,"image":889,"kind":890,"meta":891,"navigation":892,"ogImage":893,"path":894,"project":889,"seo":895,"slug":889,"stem":896,"tags":897,"updated":889,"__hash__":900},"blog_pl\u002Fpl\u002Fblog\u002F2026\u002Favif-webp-jpg-png-i-picture.md","AVIF, WebP, JPG czy PNG? I kiedy warto użyć \u003Cpicture>","\u002Fart\u002Fblog\u002Fformaty-obrazkow.svg",{"type":8,"value":9,"toc":876},"minimark",[10,18,23,26,32,129,134,216,219,239,243,279,286,289,292,296,299,400,417,425,435,440,445,613,619,704,707,750,756,764,788,792,847,850,854,872],[11,12,13,17],"p",{},[14,15,16],"code",{},"\u003Cpicture>"," używam praktycznie wszędzie – w WordPressie i w Vue. Chodzi mi o jedno: żeby telefon, tablet i komputer pobierały obrazek w takim rozmiarze, jakiego naprawdę potrzebują. Coraz częściej wybieram AVIF – teraz także na tym portfolio, z WebP jako zapasem. Żeby nie pisać z pamięci, zmierzyłem to na dwóch obrazkach z mojego portfolio.",[19,20,22],"h2",{"id":21},"pomiar","Pomiar",[11,24,25],{},"Wziąłem dwa obrazki: ilustrację z mojego portretu (z przezroczystym tłem) i zrzut strony głównej portfolio (tekst, kolory, ostre krawędzie). Każdy zapisałem w czterech formatach i czterech szerokościach tym samym narzędziem, którego używa moja strona (sharp 0.34). Ustawienia: PNG bez strat, JPG w jakości 80, WebP w jakości 80, AVIF w jakości 50 – przy tych wartościach obrazki wyglądają podobnie.",[11,27,28],{},[29,30,31],"strong",{},"Portret (rozmiar pliku w KB)",[33,34,35,57],"table",{},[36,37,38],"thead",{},[39,40,41,45,48,51,54],"tr",{},[42,43,44],"th",{},"Szerokość",[42,46,47],{},"PNG",[42,49,50],{},"JPG",[42,52,53],{},"WebP",[42,55,56],{},"AVIF",[58,59,60,78,95,112],"tbody",{},[39,61,62,66,69,72,75],{},[63,64,65],"td",{},"400 px",[63,67,68],{},"155",[63,70,71],{},"15,9",[63,73,74],{},"17,0",[63,76,77],{},"9,4",[39,79,80,83,86,89,92],{},[63,81,82],{},"800 px",[63,84,85],{},"519",[63,87,88],{},"45,5",[63,90,91],{},"45,0",[63,93,94],{},"20,5",[39,96,97,100,103,106,109],{},[63,98,99],{},"1200 px",[63,101,102],{},"994",[63,104,105],{},"82,3",[63,107,108],{},"79,1",[63,110,111],{},"32,0",[39,113,114,117,120,123,126],{},[63,115,116],{},"1600 px",[63,118,119],{},"1603",[63,121,122],{},"123,8",[63,124,125],{},"115,2",[63,127,128],{},"43,2",[11,130,131],{},[29,132,133],{},"Zrzut strony (rozmiar pliku w KB)",[33,135,136,150],{},[36,137,138],{},[39,139,140,142,144,146,148],{},[42,141,44],{},[42,143,47],{},[42,145,50],{},[42,147,53],{},[42,149,56],{},[58,151,152,168,184,200],{},[39,153,154,156,159,162,165],{},[63,155,65],{},[63,157,158],{},"63,4",[63,160,161],{},"9,1",[63,163,164],{},"7,5",[63,166,167],{},"5,0",[39,169,170,172,175,178,181],{},[63,171,82],{},[63,173,174],{},"210,9",[63,176,177],{},"26,8",[63,179,180],{},"21,7",[63,182,183],{},"12,8",[39,185,186,188,191,194,197],{},[63,187,99],{},[63,189,190],{},"463,2",[63,192,193],{},"50,4",[63,195,196],{},"38,8",[63,198,199],{},"22,3",[39,201,202,204,207,210,213],{},[63,203,116],{},[63,205,206],{},"778,7",[63,208,209],{},"76,9",[63,211,212],{},"57,6",[63,214,215],{},"31,7",[11,217,218],{},"Co z tego wynika:",[220,221,222,228,234],"ul",{},[223,224,225,227],"li",{},[29,226,47],{}," jest kilkanaście razy cięższy od pozostałych formatów. Ma sens tam, gdzie obrazek musi zostać bez strat – np. mała ikona albo zrzut do dokumentacji.",[223,229,230,233],{},[29,231,232],{},"JPG i WebP"," przy portrecie wychodzą prawie tak samo, a przy zrzucie z tekstem WebP jest o ok. 20–25% lżejszy. WebP ma też przezroczystość, której JPG nie ma – portret w JPG dostał białe tło.",[223,235,236,238],{},[29,237,56],{}," jest najlżejszy: od 1,7 do 2,7 raza mniejszy niż WebP. Ma też przezroczystość, a na zrzucie z tekstem litery w AVIF (jakość 50) są tak samo czytelne jak w WebP (jakość 80).",[19,240,242],{"id":241},"haczyk-avif-czas-kodowania","Haczyk AVIF: czas kodowania",[33,244,245,260],{},[36,246,247],{},[39,248,249,252,254,256,258],{},[42,250,251],{},"Portret, 1600 px",[42,253,47],{},[42,255,50],{},[42,257,53],{},[42,259,56],{},[58,261,262],{},[39,263,264,267,270,273,276],{},[63,265,266],{},"Czas zapisu",[63,268,269],{},"247 ms",[63,271,272],{},"267 ms",[63,274,275],{},"360 ms",[63,277,278],{},"5932 ms",[11,280,281,282,285],{},"AVIF zapisuje się kilkanaście razy dłużej niż pozostałe formaty. Na mojej stronie wyszło to w praktyce. Przy budowaniu strony (",[14,283,284],{},"nuxt generate",") @nuxt\u002Fimage tworzy wszystkie wersje obrazków – u mnie 876 plików w każdym formacie. Z AVIF i WebP trwało to ok. 12 minut, z samym WebP – ok. 1 minuty. Odwiedzający pobierał na pierwszym ekranie strony głównej 59 kB obrazków zamiast 120 kB, a czas wczytania największego elementu (LCP) na telefonie różnił się o ok. 0,2 s.",[11,287,288],{},"Najpierw wyłączyłem AVIF i zostałem przy samym WebP. Potem do niego wróciłem: nowe wpisy dodaję rzadziej, a strona buduje się w nocy, więc dłuższe budowanie mi nie przeszkadza.",[11,290,291],{},"Ze wsparciem w przeglądarkach nie ma już problemu: według caniuse.com (wrzesień 2026) WebP obsługuje ok. 97% użytkowników, a AVIF ok. 96%.",[19,293,295],{"id":294},"mniejsze-wersje-srcset-i-sizes","Mniejsze wersje: srcset i sizes",[11,297,298],{},"Największa oszczędność nie bierze się z formatu, tylko z rozmiaru. Telefon nie potrzebuje obrazka o szerokości 1600 px. Portret w WebP przy 800 px ma 45 KB, a przy 1600 px – 115 KB. Dlatego każdy obrazek zapisuję w kilku szerokościach i daję przeglądarce wybór:",[300,301,306],"pre",{"className":302,"code":303,"language":304,"meta":305,"style":305},"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=\"Portret\" loading=\"lazy\">\n","html","",[14,307,308,321,335,346,352,363],{"__ignoreMap":305},[309,310,313,317],"span",{"class":311,"line":312},"line",1,[309,314,316],{"class":315},"sVt8B","\u003C",[309,318,320],{"class":319},"s9eBZ","img\n",[309,322,324,328,331],{"class":311,"line":323},2,[309,325,327],{"class":326},"sScJk","  src",[309,329,330],{"class":315},"=",[309,332,334],{"class":333},"sZZnC","\"\u002Fimg\u002Fportret-800.webp\"\n",[309,336,338,341,343],{"class":311,"line":337},3,[309,339,340],{"class":326},"  srcset",[309,342,330],{"class":315},[309,344,345],{"class":333},"\"\u002Fimg\u002Fportret-400.webp 400w, \u002Fimg\u002Fportret-800.webp 800w,\n",[309,347,349],{"class":311,"line":348},4,[309,350,351],{"class":333},"          \u002Fimg\u002Fportret-1200.webp 1200w, \u002Fimg\u002Fportret-1600.webp 1600w\"\n",[309,353,355,358,360],{"class":311,"line":354},5,[309,356,357],{"class":326},"  sizes",[309,359,330],{"class":315},[309,361,362],{"class":333},"\"(max-width: 640px) 100vw, 50vw\"\n",[309,364,366,369,371,374,377,379,381,384,386,389,392,394,397],{"class":311,"line":365},6,[309,367,368],{"class":326},"  width",[309,370,330],{"class":315},[309,372,373],{"class":333},"\"800\"",[309,375,376],{"class":326}," height",[309,378,330],{"class":315},[309,380,373],{"class":333},[309,382,383],{"class":326}," alt",[309,385,330],{"class":315},[309,387,388],{"class":333},"\"Portret\"",[309,390,391],{"class":326}," loading",[309,393,330],{"class":315},[309,395,396],{"class":333},"\"lazy\"",[309,398,399],{"class":315},">\n",[220,401,402,408,414],{},[223,403,404,407],{},[14,405,406],{},"srcset"," to lista plików z ich szerokością.",[223,409,410,413],{},[14,411,412],{},"sizes"," mówi przeglądarce, jak szeroki będzie obrazek na stronie: na telefonie cała szerokość ekranu, wyżej połowa.",[223,415,416],{},"Przeglądarka sama wybiera plik i bierze pod uwagę gęstość pikseli. Telefon z ekranem 400 px i gęstością 2× pobierze wersję 800 px, a nie 1600 px.",[11,418,419,421,422,424],{},[14,420,412],{}," musi pasować do prawdziwego rozmiaru obrazka. U siebie miałem portret w nagłówku strony z ",[14,423,412],{}," liczonym od szerokości ekranu, a obrazek zależał od wysokości kadru. Po poprawce telefon pobiera plik 732 px zamiast 1076 px.",[19,426,428,430,431,434],{"id":427},"picture-i-source-kiedy-warto",[14,429,16],{}," i ",[14,432,433],{},"\u003Csource>",": kiedy warto",[11,436,437,439],{},[14,438,16],{}," przydaje się w dwóch sytuacjach.",[11,441,442],{},[29,443,444],{},"1. Kilka formatów – przeglądarka bierze pierwszy, który obsługuje:",[300,446,448],{"className":302,"code":447,"language":304,"meta":305,"style":305},"\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=\"Portret\" loading=\"lazy\">\n\u003C\u002Fpicture>\n",[14,449,450,459,467,477,487,499,505,515,525,536,543,554,564,573,603],{"__ignoreMap":305},[309,451,452,454,457],{"class":311,"line":312},[309,453,316],{"class":315},[309,455,456],{"class":319},"picture",[309,458,399],{"class":315},[309,460,461,464],{"class":311,"line":323},[309,462,463],{"class":315},"  \u003C",[309,465,466],{"class":319},"source\n",[309,468,469,472,474],{"class":311,"line":337},[309,470,471],{"class":326},"    type",[309,473,330],{"class":315},[309,475,476],{"class":333},"\"image\u002Favif\"\n",[309,478,479,482,484],{"class":311,"line":348},[309,480,481],{"class":326},"    srcset",[309,483,330],{"class":315},[309,485,486],{"class":333},"\"\u002Fimg\u002Fportret-400.avif 400w, \u002Fimg\u002Fportret-800.avif 800w\"\n",[309,488,489,492,494,497],{"class":311,"line":354},[309,490,491],{"class":326},"    sizes",[309,493,330],{"class":315},[309,495,496],{"class":333},"\"(max-width: 640px) 100vw, 50vw\"",[309,498,399],{"class":315},[309,500,501,503],{"class":311,"line":365},[309,502,463],{"class":315},[309,504,466],{"class":319},[309,506,508,510,512],{"class":311,"line":507},7,[309,509,471],{"class":326},[309,511,330],{"class":315},[309,513,514],{"class":333},"\"image\u002Fwebp\"\n",[309,516,518,520,522],{"class":311,"line":517},8,[309,519,481],{"class":326},[309,521,330],{"class":315},[309,523,524],{"class":333},"\"\u002Fimg\u002Fportret-400.webp 400w, \u002Fimg\u002Fportret-800.webp 800w\"\n",[309,526,528,530,532,534],{"class":311,"line":527},9,[309,529,491],{"class":326},[309,531,330],{"class":315},[309,533,496],{"class":333},[309,535,399],{"class":315},[309,537,539,541],{"class":311,"line":538},10,[309,540,463],{"class":315},[309,542,320],{"class":319},[309,544,546,549,551],{"class":311,"line":545},11,[309,547,548],{"class":326},"    src",[309,550,330],{"class":315},[309,552,553],{"class":333},"\"\u002Fimg\u002Fportret-800.jpg\"\n",[309,555,557,559,561],{"class":311,"line":556},12,[309,558,481],{"class":326},[309,560,330],{"class":315},[309,562,563],{"class":333},"\"\u002Fimg\u002Fportret-400.jpg 400w, \u002Fimg\u002Fportret-800.jpg 800w\"\n",[309,565,567,569,571],{"class":311,"line":566},13,[309,568,491],{"class":326},[309,570,330],{"class":315},[309,572,362],{"class":333},[309,574,576,579,581,583,585,587,589,591,593,595,597,599,601],{"class":311,"line":575},14,[309,577,578],{"class":326},"    width",[309,580,330],{"class":315},[309,582,373],{"class":333},[309,584,376],{"class":326},[309,586,330],{"class":315},[309,588,373],{"class":333},[309,590,383],{"class":326},[309,592,330],{"class":315},[309,594,388],{"class":333},[309,596,391],{"class":326},[309,598,330],{"class":315},[309,600,396],{"class":333},[309,602,399],{"class":315},[309,604,606,609,611],{"class":311,"line":605},15,[309,607,608],{"class":315},"\u003C\u002F",[309,610,456],{"class":319},[309,612,399],{"class":315},[11,614,615,618],{},[29,616,617],{},"2. Inny kadr na telefonie"," – np. pionowe zdjęcie zamiast szerokiego:",[300,620,622],{"className":302,"code":621,"language":304,"meta":305,"style":305},"\u003Cpicture>\n  \u003Csource media=\"(max-width: 640px)\" srcset=\"\u002Fimg\u002Fhero-pion.webp\">\n  \u003Cimg src=\"\u002Fimg\u002Fhero-szeroki.webp\" width=\"1600\" height=\"700\" alt=\"…\">\n\u003C\u002Fpicture>\n",[14,623,624,632,657,696],{"__ignoreMap":305},[309,625,626,628,630],{"class":311,"line":312},[309,627,316],{"class":315},[309,629,456],{"class":319},[309,631,399],{"class":315},[309,633,634,636,639,642,644,647,650,652,655],{"class":311,"line":323},[309,635,463],{"class":315},[309,637,638],{"class":319},"source",[309,640,641],{"class":326}," media",[309,643,330],{"class":315},[309,645,646],{"class":333},"\"(max-width: 640px)\"",[309,648,649],{"class":326}," srcset",[309,651,330],{"class":315},[309,653,654],{"class":333},"\"\u002Fimg\u002Fhero-pion.webp\"",[309,656,399],{"class":315},[309,658,659,661,664,667,669,672,675,677,680,682,684,687,689,691,694],{"class":311,"line":337},[309,660,463],{"class":315},[309,662,663],{"class":319},"img",[309,665,666],{"class":326}," src",[309,668,330],{"class":315},[309,670,671],{"class":333},"\"\u002Fimg\u002Fhero-szeroki.webp\"",[309,673,674],{"class":326}," width",[309,676,330],{"class":315},[309,678,679],{"class":333},"\"1600\"",[309,681,376],{"class":326},[309,683,330],{"class":315},[309,685,686],{"class":333},"\"700\"",[309,688,383],{"class":326},[309,690,330],{"class":315},[309,692,693],{"class":333},"\"…\"",[309,695,399],{"class":315},[309,697,698,700,702],{"class":311,"line":348},[309,699,608],{"class":315},[309,701,456],{"class":319},[309,703,399],{"class":315},[11,705,706],{},"Ile to kosztuje? Zmierzyłem sam kod HTML dla czterech szerokości:",[33,708,709,726],{},[36,710,711],{},[39,712,713,715,721],{},[42,714],{},[42,716,717,720],{},[14,718,719],{},"\u003Cimg srcset>"," (1 format)",[42,722,723,725],{},[14,724,16],{}," (AVIF + WebP + JPG)",[58,727,728,739],{},[39,729,730,733,736],{},[63,731,732],{},"HTML",[63,734,735],{},"250 B",[63,737,738],{},"652 B",[39,740,741,744,747],{},[63,742,743],{},"HTML po kompresji (gzip)",[63,745,746],{},"158 B",[63,748,749],{},"232 B",[11,751,752,753,755],{},"Po kompresji ",[14,754,16],{}," dodaje do strony ok. 75 bajtów na każdy obrazek. W zamian przeglądarka pobiera portret 800 px w AVIF (20,5 KB) zamiast w WebP (45 KB), czyli o ok. 24 KB mniej. Te 75 bajtów nie ma więc znaczenia. Prawdziwy koszt jest gdzie indziej: trzy razy więcej plików na serwerze (AVIF, WebP i JPG) i dłuższe budowanie.",[11,757,758],{},[29,759,760,761,763],{},"Kiedy ",[14,762,16],{}," nie ma sensu:",[220,765,766,782,785],{},[223,767,768,769,772,773,775,776,778,779,781],{},"gdy używasz tylko jednego formatu – wystarczy ",[14,770,771],{},"\u003Cimg>"," ze ",[14,774,406],{},", a ",[14,777,16],{}," z jednym ",[14,780,433],{}," nic nie daje;",[223,783,784],{},"przy ikonach i logo – lepszy jest SVG;",[223,786,787],{},"gdy liczy się czas budowania, a AVIF trzeba wygenerować dla setek obrazków.",[19,789,791],{"id":790},"moja-ściąga","Moja ściąga",[33,793,794,804],{},[36,795,796],{},[39,797,798,801],{},[42,799,800],{},"Co",[42,802,803],{},"Format",[58,805,806,816,824,832,840],{},[39,807,808,811],{},[63,809,810],{},"Zdjęcia, ilustracje, przezroczystość, zrzuty ekranu z tekstem",[63,812,813,814],{},"AVIF, a WebP jako zapas w ",[14,815,16],{},[39,817,818,821],{},[63,819,820],{},"Zrzut co do piksela, z przezroczystością lub bez (np. do dokumentacji)",[63,822,823],{},"PNG albo WebP bez strat",[39,825,826,829],{},[63,827,828],{},"Podgląd dla klienta w mailu",[63,830,831],{},"JPG – różnicy nie widać, a plik mieści się w mailu",[39,833,834,837],{},[63,835,836],{},"Ikony i logo",[63,838,839],{},"SVG",[39,841,842,845],{},[63,843,844],{},"Obrazek podglądu linku (OG) w social mediach",[63,846,50],{},[11,848,849],{},"AVIF jest więc u mnie domyślnym formatem. JPG zostawiam do dwóch rzeczy: podglądu linku, bo Facebook i LinkedIn nie zawsze pokazują AVIF, i podglądów, które wysyłam klientom mailem.",[19,851,853],{"id":852},"co-z-tego-zostało","Co z tego zostało",[220,855,856,864,867],{},[223,857,858,859,430,861,863],{},"Najwięcej daje dobry rozmiar (",[14,860,406],{},[14,862,412],{},"), dopiero potem format.",[223,865,866],{},"AVIF jest najlżejszy i nadaje się do wszystkiego – zdjęć, przezroczystości i zrzutów z tekstem. Zapisuje się jednak kilkanaście razy dłużej, więc przy wielu obrazkach widać to w czasie budowania.",[223,868,869,871],{},[14,870,16],{}," dokłada kilkadziesiąt bajtów HTML na obrazek, a oszczędza kilkadziesiąt kilobajtów. Warto, gdy masz więcej niż jeden format albo inny kadr na telefon.",[873,874,875],"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":305,"searchDepth":323,"depth":323,"links":877},[878,879,880,881,883,884],{"id":21,"depth":323,"text":22},{"id":241,"depth":323,"text":242},{"id":294,"depth":323,"text":295},{"id":427,"depth":323,"text":882},"\u003Cpicture> i \u003Csource>: kiedy warto",{"id":790,"depth":323,"text":791},{"id":852,"depth":323,"text":853},"2026-10-20","Poradnik z pomiarem – te same obrazki w czterech formatach i czterech szerokościach. Który format wybrać, po co mniejsze wersje i kiedy \u003Cpicture> z kilkoma \u003Csource> ma sens, a kiedy tylko powiększa stronę.",false,"md",null,"post",{},true,"\u002Fog\u002Fblog\u002Fformaty-obrazkow-pl.jpg","\u002Fpl\u002Fblog\u002F2026\u002Favif-webp-jpg-png-i-picture",{"title":5,"description":886},"pl\u002Fblog\u002F2026\u002Favif-webp-jpg-png-i-picture",[898,304,899],"performance","images","fVEQf-zZLYwUaQU2m6izjBjy2p41HwdUWDCLBXVnYNw",1792483024683]