WebP vs AVIF vs JPEG vs PNG: ktorý formát obrázkov zvoliť a ako zmenšiť veľkosť súborov?

V roku 2026 majú všetky štyri formáty svoje miesto, ale pre odlišné úlohy:

• AVIF najčastejšie víťazí veľkosťou prenosu pri fotografiách a zložitých obrazoch.
• WebP ponúka veľmi dobrý pomer kompresie, funkcií, kompatibility a nákladov na nasadenie.
• JPEG zostáva najbezpečnejším fallbackom pre fotografie a systémy s neznámymi požiadavkami.
• PNG sa hodí najmä pre bezstratovú rastrovú grafiku, screenshoty rozhrania, presné pixely a kvalitnú priehľadnosť.

TL;DR: pre fotografie servírujte najprv AVIF, potom WebP a JPEG ponechajte ako fallback. Pri screenshotoch, jednoduchej grafike a priehľadnosti porovnajte bezstratový WebP alebo AVIF s PNG. Pre ikony a logá je zvyčajne lepší SVG než ktorýkoľvek z týchto rastrových formátov.

Funkcie, kompatibilita a odporúčania boli naposledy overené 23. júla 2026.

Hlavné rozdiely

AVIF podporuje stratovú aj bezstratovú kompresiu, priehľadnosť, animáciu, HDR a široký farebný gamut. ^[1] WebP kombinuje stratový a bezstratový režim, alfa kanál a animáciu. PNG je bezstratový a podporuje čiastočnú priehľadnosť, ale pri fotografiách zvyčajne vytvára príliš veľké súbory.

Rýchla voľba podľa typu assetu

Jeden formát by sa nemal vnucovať všetkým obrázkom. Najlepší výsledok prináša politika podľa typu assetu, nie pravidlo „všetko previesť do AVIF“.

JPEG: stále užitočný, ale zriedka najlepšia hlavná voľba

JPEG bol navrhnutý pre fotografie. Používa stratovú kompresiu, ktorá odstraňuje informácie menej viditeľné ľudským okom. ^[4] Fotografie tak môžu byť výrazne menšie než bezstratové PNG, ale príliš silná kompresia vytvára bloky, farebné posuny a stratu detailov.

Výhody JPEG

• takmer univerzálna podpora v prehliadačoch, editoroch, CMS a externých platformách,
• spoľahlivý fallback pre fotografie,
• rýchle kódovanie a dekódovanie,
• podpora progressive JPEG,
• vyspelé optimalizačné nástroje, napríklad MozJPEG.

Progressive JPEG najprv zobrazí hrubšiu verziu cez celú plochu a potom ju postupne spresňuje. Môže byť o niečo menší než baseline JPEG a pri pomalom pripojení pôsobí rýchlejšie. ^[4]

Obmedzenia JPEG

• bez alfa kanála,
• bez animácie,
• kompresia je stratová,
• ostré čiary, text a prvky UI rýchlo získavajú artefakty,
• opakované ukladanie znižuje kvalitu,
• WebP a AVIF bývajú pri podobnej kvalite menšie.

Oficiálna štúdia tímu WebP namerala súbory WebP o 25-34 % menšie než JPEG pri porovnateľnom SSIM. ^[5] Nejde o univerzálnu garanciu, pretože výsledok závisí od zdroja, verzie enkodéra, nastavenia a použitej metriky kvality.

Kedy zvoliť JPEG v roku 2026?

JPEG dáva zmysel, keď:

• jeden súbor musí fungovať v čo najväčšom počte systémov,
• nemáte kontrolu nad klientom, ktorý obrázok prijíma,
• súbor smeruje do staršieho CMS, e-mailu, dokumentu alebo externej platformy,
• potrebujete fallback v <picture>,
• proces generovania AVIF/WebP ešte nie je pripravený.

Na modernom kontrolovanom frontende je však zvyčajne vhodné najprv servírovať novší formát.

PNG: bezstratová kvalita, ostrosť a priehľadnosť za cenu veľkosti

PNG používa bezstratovú kompresiu a zachováva pixely bez straty spôsobenej kódovaním. Podporuje aj alfa kanál s mnohými úrovňami priehľadnosti.

Výhody PNG

• veľmi ostrý text, čiary a prvky rozhrania,
• plná alfa priehľadnosť,
• žiadna generačná strata pri opakovanom uložení,
• univerzálna kompatibilita,
• dobrý referenčný rastrový formát.

Obmedzenia PNG

• fotografie bývajú výrazne väčšie než JPEG, WebP alebo AVIF,
• klasické PNG nie je animované; animovaným variantom je APNG,
• raster sa škáluje horšie než SVG,
• zbytočné metadáta, kanály alebo nevhodná paleta súbor zväčšujú,
• samotná priehľadnosť už nie je automatickým dôvodom na použitie PNG.

web.dev uvádza, že PNG takmer nikdy nie je správnym formátom na doručovanie fotografií. ^[3] Jednoduché polopriehľadné grafiky by sa mali porovnať s WebP alebo AVIF.

Kedy PNG stále vyhráva?

• screenshot obsahuje malý text a tenké čiary,
• potrebujete bezstratovú rastrovú kópiu,
• cieľová platforma prijíma PNG, ale nie WebP/AVIF,
• grafika má malú paletu farieb,
• dokonalá reprodukcia je dôležitejšia než prenos,
• súbor slúži ako zdroj pre ďalšie kódovanie.

Pri logách, ikonách, grafoch a jednoduchých ilustráciách najprv vyskúšajte SVG. ^[6]

WebP: najpraktickejší východiskový formát

Google vyvinul WebP ako efektívnejšiu alternatívu JPEG a neskôr doplnil bezstratový režim, priehľadnosť a animáciu. WebP tak môže nahradiť fotografie JPEG, mnoho PNG a niektoré animácie GIF. ^[2]

Výhody WebP

• stratový aj bezstratový režim,
• priehľadnosť,
• animácia,
• široká podpora v aktuálnych prehliadačoch,
• vyspelý ekosystém CMS, knižníc a obrazových CDN,
• zvyčajne menší než JPEG alebo PNG,
• často jednoduchšie a rýchlejšie kódovanie než AVIF.

Obmedzenia WebP

• bez progresívneho zobrazenia,
• starší softvér a niektoré publikačné procesy stále vyžadujú JPEG alebo PNG,
• hodnota „quality“ nie je medzi formátmi priamo porovnateľná,
• WebP nie je vždy menší než dobre zakódovaný AVIF,
• bezstratový WebP neporazí pri každej jednoduchej grafike optimalizovaný PNG.

Kedy je WebP najlepšou voľbou?

WebP je ideálny, ak chcete:

• rýchlo zmenšiť fotografie bez zložitej pipeline,
• zachovať priehľadnosť,
• obslúžiť takmer všetky aktuálne prehliadače jedným moderným formátom,
• spracovávať obrázky lokálne alebo na vyžiadanie,
• obmedziť počet produkčných formátov,
• vyvážiť kvalitu, veľkosť a náklady kódovania.

POLPROG Konvertor a optimalizátor obrázkov spracúva PNG, JPG a WebP lokálne v prehliadači a podporuje konverziu, kompresiu, zmenu rozmerov aj odstránenie metadát. ^[7]

AVIF: minimálny prenos a najširšie moderné funkcie

AVIF je založený na kodeku AV1 a kontajneri HEIF. ^[1] Podporuje stratovú aj bezstratovú kompresiu, alfa kanál, animáciu, HDR a široký farebný gamut.

Výhody AVIF

• veľmi vysoká účinnosť kompresie,
• dobrá vizuálna kvalita pri nízkom bitrate,
• stratový aj bezstratový režim,
• priehľadnosť a animácia,
• 8-, 10- a 12-bitové obrázky a HDR,
• podpora vo všetkých aktuálnych hlavných prehliadačoch,
• dobré výsledky pri fotografiách, gradientoch a zložitých obrazoch.

AVIF je funkciou Baseline od januára 2024, čo znamená podporu v aktuálnych verziách hlavných prehliadačových enginov. ^[8]

Obmedzenia AVIF

• bez progresívneho vykresľovania,
• kódovanie môže byť výpočtovo náročnejšie než JPEG alebo WebP,
• výsledok silno závisí od enkodéra, rýchlosti, chroma subsamplingu a nastavenia,
• niektoré externé systémy stále odmietajú .avif,
• veľmi malé grafiky nemusia byť menšie než SVG, PNG alebo WebP,
• nevhodné nastavenie môže rozmazať textúry alebo drobný text.

MDN uvádza, že AVIF môže ponúknuť o niečo lepšiu kompresiu než WebP, ale nepodporuje progresívne vykresľovanie. ^[9] Pevný sľub typu „AVIF je vždy o 50 % menší“ nie je správny.

Kedy AVIF nasadiť?

• obrázky tvoria veľkú časť prenosu,
• web používa mnoho produktových alebo hero fotografií,
• tím má automatickú obrazovú pipeline,
• assety sa kódujú raz a mnohokrát doručujú,
• dôležité sú HDR, široký gamut alebo vyššia bitová hĺbka,
• možno zachovať WebP/JPEG ako fallback.

Je AVIF vždy menší než WebP?

Nie. web.dev ho označuje za veľmi silnú voľbu pre fotografické katalógy, s WebP ako moderným fallbackom a JPEG ako najspoľahlivejším východiskovým formátom. Výsledok závisí od:

• obsahu a rozlíšenia,
• šumu,
• textu a tenkých čiar,
• stratového či bezstratového režimu,
• bitovej hĺbky a chroma subsamplingu,
• implementácie a verzie enkodéra,
• nastavenia rýchlosti,
• použitej metriky kvality.

Porovnávajte pri ekvivalentnej vizuálnej kvalite, nie podľa rovnakého čísla posuvníka. quality=75 neznamená v JPEG, WebP a AVIF to isté.

Core Web Vitals a LCP

Moderný formát môže skrátiť čas sťahovania a zlepšiť časť LCP súvisiacu s prenosom. Nevyrieši neskoré objavenie obrázka, pomalý server, nesprávne rozmery ani vykresľovanie riadené JavaScriptom. ^[12]

Pre LCP obrázok:

• nepoužívajte loading="lazy",
• umiestnite ho do HTML čo najskôr,
• zvážte fetchpriority="high",
• uveďte správne width a height,
• dodajte správne rozlíšenie pomocou srcset a sizes,
• obmedzte presmerovania a závislosti,
• nesťahujte súčasne nepoužité varianty.

web.dev neodporúča lazy loading pre obrázky nad foldom, najmä pre kandidátov LCP. ^[11] fetchpriority="high" môže pomôcť so skoršou prioritizáciou.

Viac v článkoch Audit webu v roku 2026 a Core Web Vitals v praxi.

Správna implementácia pomocou <picture>

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-800.avif 800w,
            /images/hero-1280.avif 1280w,
            /images/hero-1920.avif 1920w"
    sizes="100vw"
  >
  <source
    type="image/webp"
    srcset="/images/hero-800.webp 800w,
            /images/hero-1280.webp 1280w,
            /images/hero-1920.webp 1920w"
    sizes="100vw"
  >
  <img
    src="/images/hero-1280.jpg"
    srcset="/images/hero-800.jpg 800w,
            /images/hero-1280.jpg 1280w,
            /images/hero-1920.jpg 1920w"
    sizes="100vw"
    width="1920"
    height="1080"
    fetchpriority="high"
    alt="Panel analýzy výkonu webu"
  >
</picture>

Prehliadač vyberie prvý podporovaný <source>, preto má byť AVIF pred WebP a bežný <img> zabezpečuje fallback. ^[13]

Google môže nájsť obrázok z atribútu src prvku <img>, aj keď je vo vnútri <picture>. Google Search podporuje JPEG, PNG, WebP a AVIF. ^[14]

Pre obrázky mimo viewport možno použiť:

<img
  src="/images/example.webp"
  width="960"
  height="640"
  loading="lazy"
  decoding="async"
  alt="Porovnanie veľkosti obrazových súborov"
>

Lazy loading nepridávajte automaticky k hero obrázkom, hlavným produktovým fotografiám ani kandidátom LCP. ^[11]

Responzívne obrázky sú dôležitejšie než samotný formát

Konverzia obrázka 2400 × 1600 do AVIF problém nevyrieši, ak telefón zobrazuje iba 360 px. Správny počet pixelov môže ušetriť viac než samotná zmena kodeku. ^[12]

Zvážte:

• šírkové varianty v srcset,
• správne sizes,
• samostatný mobilný orez,
• vysokú hustotu iba tam, kde je viditeľná,
• limity rozmerov v CMS,
• skutočné miniatúry namiesto CSS zmenšenia veľkého zdroja.

Formát, rozmery a kompresia tvoria jeden systém.

Ako férovo porovnávať kvalitu?

1. Začnite originálom alebo bezstratovým zdrojom.
2. Vygenerujte viac úrovní kvality pre každý formát.
3. Kontrolujte v cieľovej veľkosti zobrazenia.
4. Prezrite tváre, vlasy, gradienty, text, hrany a tmavé oblasti.
5. Zmerajte náklady kódovania a dekódovania.
6. Vyberte najmenší súbor s prijateľnou kvalitou.
7. Test zopakujte pre rôzne typy obrázkov.

SSIM môže pomôcť automatizácii, ale nenahrádza vizuálnu kontrolu. ^[10]

Časté chyby

Prekódovanie už silno komprimovaného JPEG

AVIF neobnoví stratené detaily. Použite originál alebo bezstratový zdroj.

Jedna hodnota kvality pre všetko

Portrét, screenshot, nočná fotografia a gradient reagujú odlišne. Pipeline by mala používať profily alebo kontrolu kvality.

Chýbajúce rozmery

Bez width a height môže vzniknúť CLS bez ohľadu na formát.

Lazy loading hero obrázka

Aj malý AVIF príde neskoro, ak je objavený až po renderingu alebo má loading="lazy".

Príliš veľa variantov

Mnoho šírok v štyroch formátoch zvyšuje úložisko a čas buildu. Generujte iba používané varianty.

PNG pre každú priehľadnosť

WebP a AVIF tiež podporujú alfa kanál. PNG zachovajte, keď poskytuje lepšie hrany, menší súbor alebo je vyžadovaný platformou.

Raster pre ikony a logá

SVG je zvyčajne ľahší, škálovateľný a jednoduchšie štýlovateľný. ^[6]

SEO obrázkov

Google Search podporuje všetky štyri formáty. ^[14] Neexistuje zdokumentovaný rankingový bonus iba za .avif alebo .webp. Prínos je nepriamy cez výkon a používateľskú skúsenosť.

Preverte tiež:

• stabilnú a opisnú URL,
• príponu zodpovedajúcu skutočnému typu,
• správny MIME type,
• užitočný alternatívny text,
• viditeľný textový kontext,
• prístup pre Googlebota,
• správne rozmery,
• image sitemap pri obrazovo orientovaných weboch,
• licenčné metadáta, ak sú relevantné.

Použite Kontrolu stavu webu pre techniku a výkon a Náhľad Open Graph pre sociálne karty.

Odporúčaná obrazová politika

Jednoduchá varianta

• WebP ako hlavný formát,
• JPEG fallback pre fotografie,
• PNG iba pre vybrané grafiky,
• SVG pre logá a ikony,
• srcset pre dôležité obrázky.

Optimálna varianta

• AVIF prvý,
• WebP druhý,
• JPEG fallback,
• bezstratový WebP/AVIF alebo PNG pre screenshoty,
• automatické šírkové varianty,
• rozpočet kvality a prenosu,
• monitoring LCP a RUM.

E-commerce

• produktové fotografie v AVIF a WebP,
• JPEG fallback,
• oddelené veľké a thumbnail varianty,
• zoomový obrázok až po interakcii,
• kritická fotografia bez lazy loadingu,
• test jemných textúr, farieb a priehľadnosti,
• cache a obrazové CDN.

Záver

AVIF je najlepší, keď je prioritou minimálny prenos a máte kvalitnú pipeline. WebP je najlepší univerzálny formát pre jednoduchosť, kompatibilitu a silnú kompresiu. JPEG zostáva najbezpečnejším fallbackom pre fotografie a PNG má byť používaný cielene pre bezstratovú grafiku a priehľadnosť.

Odporúčaná stratégia:

AVIF → WebP → JPEG

pre fotografie a:

bezstratový AVIF/WebP ↔ PNG

pre ostré alebo priehľadné assety po skutočnom porovnaní.