Výběr formátu obrázku býval jednoduchý: JPEG na fotky, PNG na grafiku, hotovo. Dnes je situace o něco složitější — a zároveň přínosnější. Moderní formáty jako WebP a AVIF dokážou snížit datovou velikost obrázku o polovinu i více bez viditelné ztráty kvality, což přímo zlepšuje rychlost načítání stránky, výkon ve vyhledávání i zážitek všech návštěvníků s pomalým připojením.
Tento průvodce vysvětluje, jak jednotlivé hlavní webové formáty obrázků skutečně fungují, kde každý z nich vyniká a jak si s jistotou vybrat ten správný. Je určený pro každého, kdo publikuje obrázky na webu — vývojáře, designéry, marketéry i provozovatele e-shopů — a zaměřuje se na praktická rozhodnutí, ne na teorii.
Začněte dvěma otázkami
Téměř každé rozhodnutí o formátu se dá zredukovat na dvě vlastnosti vašeho obrázku.
**Je to fotografie, nebo grafika?** Fotografie (plynulé tóny, přechody, měkké hrany) se dobře komprimují *ztrátovými* formáty, které zahodí detail, jehož si oko sotva všimne. Grafika s ostrými hranami, jednolitými plochami a textem — loga, ikony, snímky obrazovky, grafy — potřebuje *bezztrátovou* kompresi nebo vektorový formát, aby zůstala ostrá.
**Potřebujete průhlednost nebo animaci?** Logo umístěné na různá pozadí potřebuje alfa kanál. Krátká smyčka videa potřebuje podporu animace. Tyto požadavky rozhodnou o vhodnosti formátu ještě dřív, než vůbec přijde na řadu datová velikost.
Mějte tyto dvě odpovědi na paměti, až budeme procházet jednotlivé formáty.
Webové formáty obrázků v přehledu
| Formát | Komprese | Průhlednost | Animace | Podpora prohlížečů | Nejlépe pro |
|---|---|---|---|---|---|
| JPEG (JPG) | Ztrátová | Ne | Ne | Univerzální | Fotografie, kde záleží na kompatibilitě |
| PNG | Bezztrátová | Ano (alfa) | Ne | Univerzální | Loga, ikony, snímky obrazovky, jednolitou grafiku |
| WebP | Ztrátová i bezztrátová | Ano (alfa) | Ano | Všechny moderní prohlížeče | Moderní výchozí volbu pro fotky i grafiku |
| AVIF | Ztrátová i bezztrátová | Ano (alfa) | Ano | Většina moderních prohlížečů | Maximální efektivitu u fotek a hlavních obrázků |
| SVG | Vektorová (bezztrátová) | Ano | Ano | Univerzální | Loga, ikony, ilustrace, které se musí škálovat |
| GIF | Bezztrátová, 256 barev | 1bitová | Ano | Univerzální | Starší jednoduché animace |
JPEG (JPG): univerzální formát pro fotky
JPEG je výchozím fotografickým formátem už tři desetiletí a jeho největší předností je univerzální kompatibilita. Každý prohlížeč, operační systém, fotoaparát i editační nástroj jej přečte bez problémů.
JPEG používá ztrátovou kompresi: zahodí vysokofrekvenční detail, na který je lidský zrak nejméně citlivý, a zbytek uloží kompaktně. Při vysokém nastavení kvality je ztráta neviditelná; pokud kompresi přeženete, objeví se kostkovité artefakty a halo efekty kolem hran.
Jeho omezení jsou stejně důležitá jako jeho dosah. JPEG nepodporuje průhlednost, takže každá průhledná oblast se změní v jednolité pozadí, a špatně si poradí s ostrými hranami a textem. JPEG použijte, když se fotografie musí otevřít kdekoli bez rizika nekompatibility. Pokud máte grafiku nebo potřebujete průhlednost, raději převeďte JPG na PNG.
PNG: když potřebujete průhlednost nebo dokonalý detail
PNG je bezztrátový: reprodukuje každý pixel přesně tak, jak byl uložen, bez kompresních artefaktů. To z něj dělá správný nástroj pro loga, ikony, snímky obrazovky, diagramy a jakoukoli grafiku s ostrými hranami nebo velkými plochami jednolité barvy. Podporuje také plnou alfa průhlednost, takže obrázky čistě sedí na libovolném pozadí.
Daní za to je datová velikost. U fotografií může být PNG několikanásobně větší než odpovídající kvalitní JPEG. Pravidlo je jednoduché: PNG na grafiku a průhlednost, ne na fotky. Když PNG fotka zpomaluje stránku, převeďte PNG na JPG nebo, pro web ještě lépe, převeďte PNG na WebP. Podrobnější srovnání najdete v článku JPG vs PNG.
WebP: praktická moderní výchozí volba
WebP, vyvinutý společností Google, je formát, po kterém by dnes většina webů měla sáhnout jako po prvním. Podporuje ztrátovou i bezztrátovou kompresi, plnou alfa průhlednost i animaci — pokrývá tak téměř každé využití v jediném formátu. Google uvádí, že ztrátové obrázky WebP jsou obvykle o 25 až 34 procent menší než srovnatelné JPEGy a bezztrátový WebP je zpravidla zhruba o 26 procent menší než PNG.
Podpora už není překážkou: WebP funguje ve všech aktuálních hlavních prohlížečích, včetně Safari od verze 14. Drtivé většině publika můžete WebP servírovat přímo, a proto je rozumnou výchozí volbou jak pro fotky, tak pro grafiku. Pokud jej chcete začít používat, převeďte JPG na WebP nebo převeďte PNG na WebP. Podrobnější vysvětlení si přečtěte v článku Co je WebP.
AVIF: nejefektivnější, s několika kompromisy
AVIF je nejnovějším mainstreamovým formátem, postaveným na videokodeku AV1 od Alliance for Open Media. Je šampionem v efektivitě: při srovnatelné vizuální kvalitě jsou soubory AVIF často zhruba poloviční oproti JPEG a citelně menší než WebP. Zvládá také vysoký dynamický rozsah, široké barevné gamuty, průhlednost i animaci.
Má dva praktické kompromisy. Kódování je pomalejší a náročnější než u JPEG nebo WebP, což je důležité u velkých dávek. A přestože je podpora už široká — Chrome, Firefox, Edge a Safari 16.4 a novější — stále mírně zaostává za WebP, takže je rozumné mít záložní variantu. AVIF vyniká u velkých hlavních obrázků a stránek bohatých na fotky, kde záleží na každém kilobajtu. Vyzkoušejte jej převedením JPG na AVIF nebo PNG na AVIF a podrobnosti najdete v článku Co je AVIF.
SVG: pro vše, co se musí škálovat
SVG je zásadně odlišný: je to vektorový formát, který popisuje tvary matematicky, nikoli mřížkou pixelů. SVG zůstává dokonale ostrý v jakékoli velikosti, od faviconu po billboard, a přitom je u jednoduché grafiky maličký. Je správnou volbou pro loga, ikony a ilustrace tvořené jednolitými tvary a liniemi.
SVG není vhodný pro fotografie, které nemají žádnou čistou geometrii k popisu. Ale pro ikony rozhraní a značkové prvky se mu v škálovatelnosti a ostrosti nic nevyrovná. Více se dozvíte v článku Co je soubor SVG.
Jednoduchý rozhodovací rámec
Když si nejste jistí, projděte tyto otázky popořadě:
- **Je to logo, ikona nebo jednolitá ilustrace?** Použijte SVG.
- **Je to grafika nebo snímek obrazovky, nebo potřebuje průhlednost či dokonalé hrany?** Použijte PNG, nebo bezztrátový WebP pro menší soubory.
- **Je to fotografie pro moderní publikum?** Použijte AVIF pro nejmenší velikost, WebP pro nejlepší poměr velikosti a dosahu.
- **Musí se otevřít doslova kdekoli, včetně starého softwaru?** Použijte JPEG.
- **Je to animace?** Použijte WebP nebo, ještě lépe, skutečný videoformát jako MP4 — ne GIF.
Jak bezpečně servírovat moderní formáty
Nemusíte volit jeden formát pro všechny. HTML element picture nechá prohlížeč vybrat nejlepší formát, který podporuje: uveďte jako první AVIF, pak WebP a nakonec záložní JPEG nebo PNG, a každý návštěvník stáhne jen jeden soubor. Moderní prohlížeče dostanou efektivní verzi a starší zaručenou záložní variantu, a to bez jediného řádku JavaScriptu.
Tohle má význam přesahující estetiku. Obrázky bývají největší částí stránky, takže volba formátu má přímý vliv na metriku Largest Contentful Paint, jeden z Core Web Vitals od Googlu, a tím i na uživatelský zážitek a výkon ve vyhledávání. Menší a dobře zvolené obrázky patří k nejúčinnějším zlepšením rychlosti, která máte k dispozici.
Jak převést stávající obrázky
Jen málokdy je potřeba exportovat znovu od nuly. Chcete-li modernizovat stávající knihovnu, převeďte ji rovnou: JPG na WebP, PNG na WebP, JPG na AVIF, nebo PNG na JPG pro maximální kompatibilitu. Uchovejte si původní kvalitní předlohy a moderní formáty z nich generujte podle potřeby.