Formáty obrázků vysvětlené: JPG, PNG, WebP, AVIF, GIF, BMP a ICO
Jaký formát použít pro fotky, loga, snímky obrazovky, webové stránky, tisk a sociální sítě, a proč.
Každý formát obrázku je souborem kompromisů mezi velikostí souboru, kvalitou, průhledností, animací a kompatibilitou. Když zvolíte špatně, dostanete buď nafouknutý soubor, nebo rozmazané logo. Tento průvodce vysvětluje, v čem je který formát dobrý, včetně čísel, která k rozhodnutí potřebujete.
Dva druhy komprese
Bezeztrátová komprese uloží každý pixel přesně a jen najde úspornější způsob, jak stejná data zapsat, podobně jako ZIP. Bezeztrátový obrázek můžete otevřít a uložit tisíckrát a nezmění se. Takto fungují PNG, BMP, GIF a bezeztrátový WebP.
Ztrátová komprese informace zahazuje a cílí na detaily, na které je lidské oko nejméně citlivé: jemnou texturu, nepatrné barevné rozdíly, vysokofrekvenční šum. Výsledek může mít desetinu velikosti bezeztrátového souboru bez viditelného rozdílu, ale každé další uložení ubere o něco víc. Takto fungují JPG, ztrátový WebP a AVIF.
Z toho přímo plyne první pravidlo: ztrátové formáty používejte pro fotografie, které jsou plné šumu a textury, jež nikomu nechybí, a bezeztrátové formáty pro grafiku s ostrými hranami, plochými barvami a textem, kde záleží na každém pixelu.
Formát po formátu
JPG (JPEG)
Formát pro fotografie od roku 1992. Ztrátový, 8bitové barvy, bez průhlednosti, bez animace. Podporuje ho úplně všechno, co kdy vzniklo. Kompromis řídí nastavení kvality od 0 do 100; pro běžné použití je ideální 80 až 85. Jeho slabinami jsou viditelné „čtverečky“ při nízké kvalitě, zvlnění kolem ostrých hran a chybějící průhlednost. Používejte ho pro fotky, které míří kamkoli mimo prohlížeč: do e-mailu, do tisku, na tržiště, do starších programů.
PNG
Bezeztrátový, až 16bitové barvy, plná alfa průhlednost, bez animace (APNG existuje, ale je vzácný). Správná volba pro loga, ikony, snímky obrazovky, diagramy, grafy a jakýkoli obrázek, který potřebuje průhledné pozadí. Jeho slabinou je velikost: fotografie v PNG může být desetkrát větší než JPG. Na webu nikdy nepoužívejte PNG pro fotografie.
WebP
Webový formát od Googlu, dnes podporovaný každým aktuálním prohlížečem. Má ztrátový i bezeztrátový režim, v obou podporuje průhlednost a podporuje i animaci. Ztrátový WebP je při stejné kvalitě asi o 25 až 35 % menší než JPG; bezeztrátový WebP je asi o 25 % menší než PNG. Pro cokoli, co se zobrazuje v prohlížeči, je to nejlepší univerzální formát. Jeho slabinou je kompatibilita mimo prohlížeč: starší desktopové programy, některé e-mailové klienty a mnoho formulářů pro nahrávání ho stále odmítá.
AVIF
Ještě novější formát založený na videokodeku AV1. Při stejné kvalitě bývá o 50 % menší než JPG a o 20 % menší než WebP, s průhledností, animací a podporou širokého barevného gamutu. Od roku 2024 ho podporují všechny aktuální prohlížeče. Kódování je pomalé, zvlášť v prohlížeči, a podpora v programech mimo prohlížeč je stále nejednotná. Použijte ho tam, kde je velikost souboru zásadní a prostředí zobrazení máte pod kontrolou; jako zálohu vedle něj nabídněte WebP nebo JPG.
GIF
Pochází z roku 1987. Je omezený na 256 barev na snímek, průhlednost jedné barvy a animaci, což je jediný důvod, proč je stále všude. Pro fotografie je hrozný, pro jednoduchou grafiku ucházející a v kompatibilitě nepřekonatelný. U statických obrázků zvládne PNG všechno, co GIF, a lépe; u animace jsou MP4 nebo animovaný WebP mnohem menší.
BMP
Nekomprimovaná bitmapa z Windows. Obrovské soubory, v běžném použití bez průhlednosti, bez komprese. Přežívá jen proto, že se dá velmi snadno přečíst, což je důležité pro vestavěná zařízení a starší software. Nikdy ho nepoužívejte na web ani pro ukládání.
ICO
Formát ikon ve Windows a favikon v prohlížeči. Obsahuje několik velikostí stejného obrázku v jednom souboru, aby se pro kartu, záložku nebo zástupce na ploše dala vybrat ta správná. Vytvoříte ho z PNG pomocí nástroje PNG na ICO.
Srovnávací tabulka
| Formát | Komprese | Průhlednost | Animace | Velikost fotky oproti JPG | Kompatibilita |
|---|---|---|---|---|---|
| JPG | Ztrátová | Ne | Ne | 1× | Všude |
| PNG | Bezeztrátová | Ano, plný alfa kanál | Ne | 5 až 10× | Všude |
| WebP | Obojí | Ano, plný alfa kanál | Ano | 0,65 až 0,75× | Všechny prohlížeče, většina moderních aplikací |
| AVIF | Obojí | Ano, plný alfa kanál | Ano | 0,5× | Všechny aktuální prohlížeče, málo aplikací |
| GIF | Bezeztrátová, 256 barev | Ano, zapnuto/vypnuto | Ano | 2 až 4× (a horší kvalita) | Všude |
| BMP | Žádná | Ne | Ne | 20 až 30× | Všude, ale používá se zřídka |
Jaký formát na jakou práci
- Fotky na webu: WebP v kvalitě 75 až 85, se zálohou v JPG, pokud musíte podporovat velmi staré prohlížeče. AVIF, pokud chcete co nejmenší stránky.
- Loga a ikony na webu: SVG, pokud ho máte; jinak PNG nebo bezeztrátový WebP.
- Snímky obrazovky: PNG. Ztrátová komprese rozmazává text.
- Přílohy e-mailů: JPG pro fotky, PNG pro grafiku. WebP neposílejte; příliš mnoho e-mailových klientů si s ním neporadí.
- Tisk: JPG v kvalitě 95 nebo PNG/TIFF, s rozlišením 300 pixelů na palec tištěného rozměru.
- Sociální sítě: JPG nebo PNG; každá platforma při nahrání obrázek stejně znovu komprimuje, proto nahrávejte ve vysoké kvalitě a ve správných rozměrech.
- Průhledné výřezy produktů: PNG pro maximální kompatibilitu, WebP pro web.
- Favikony: ICO plus PNG pro domovské obrazovky telefonů.
Převod mezi formáty
Každý převod na tomto webu probíhá ve vašem prohlížeči. Nejčastější cesty jsou PNG na WebP a JPG na WebP pro web, WebP na JPG a WebP na PNG kvůli kompatibilitě a PNG na JPG pro zmenšení fotek, které byly uloženy ve špatném formátu. Kompresor obrázků zvládne kterýkoli z nich, i pro více souborů najednou.