Každý formát obrázku má svá specifika a hodí se použít v různých případech. Pokud porozumíte jednotlivým typům a dostatečně si je “osaháte”, můžete posunout svůj web o level výše.
Není velikost jako velikost
Pokud se bavíme o velikost obrázku, můžeme mít na mysli dvě věci:
- Velikost obrázků v px (šířka x výška, tj. rozlišení) – jak velký je obrázek na obrazovce vzhledem k její velikosti a rozlišení.
- Velikost obrázku na b (“bajty”) – kolik místa zabírá obrázek na disku.
- Do toho ještě promlouvá rozlišení (dpi nebo ppi), tj. kolik pixelů se vměstná do 1 cm. Čím větší rozlišení, tím větší obrázek fyzicky.
Tak nějak se dá tušit, že spolu tyhle “dvě velikosti” souvisí – obrázek, který má velké rozlišení, bude mít větší velikost na disku než malý obrázek. Ovšem můžete mít obrázky, které prošly kompresí, díky které jejich rozměry zůstaly stejné, ale fyzická velikost na disku se zmenšila. A právě komprimované obrázky chceme na webu mít, protože pro jejich zobrazení není nutné stáhnout tolik dat.
Rastrová grafika
Rastrová grafika jsou obrázky, které se skládají z jednotlivých malých pixelů. Každý pixel nese informace o své pozici a barvě a dohromady spolu tvoří obrázek. Rastrové obrázky jsou definované právě svými rozměry, tj. počty px na šířku a výšku (někdy se používají jednotky dpi nebo ppi).
JPG/JPEG
- Joint Photographic Experts Group
- komprese: ano (volitelná)
- průhlednost: ne
- animace: ne
Dnes už klasický a asi nejpoužívanější formát pro fotografie (na webu), který je pomalu nahrazován formáty WEBP a AVIF. Je ideální pro fotky všeho druhu s mnoha barevnými detaily, protože podporuje miliony různých barevných odstínů (má 24bitovou barevnou hloubku, takže pojme 16,7 mil barevných odstínů).
Je komprimovaný a dokonce je možné si zvolit, jak moc. To s sebou nese nepříjemnost v podobě toho, že pokud obrázek ukládáte, upravujete a komprimujete stále dokola, ztratí postupem času svou kvalitu. JPG neumí průhlednost.
Důležité je, že ho podporují snad všechny prohlížeče (narozdíl od WEBP nebo AVIF), takže je to velmi bezpečná varianta pro obrázky na webu. Pokud očekáváte, že váš webu bude zobrazovaný ve starších prohlížečích, nesázela bych pouze na WEBP/AVIF formáty (do WP existují pluginy, které to umí rozpoznat a “podstrčí” ten správný formát).
PS: JPG a JPEG je to samé. Rozdíl je pouze v tom, že JPG vznikl v době, kdy OS Windows podporoval jen třípísmenné koncovky souborů, proto bylo potřeba ji zkrátit.
PNG
- Portable Network Graphics
- komprese: ne
- průhlednost: ano
- animace: ne
Ideální formát pro obrázky, kde potřebujete průhlednost. Stejně jako JPG podporuje 24bitovou barevnou hloubku, tj. (16,7 milionu barevných odstínů) a protože nemají kompresi, jsou skvělé pro obrázky s vysokým rozlišením a všude tam, kde je třeba zachovat kvalitu.
Jeho nejdůležitější vlastnost na webech je ta, že podporuje průhlednost. PNG původně vznikl jako lepší alternativa k GIFu, protože podporuje víc barev, vrstvy, alfa kanály a další věci. Je podporovaný ve všech prohlížečích.
WebP
- komprese: ano
- průhlednost: ano
- animace: ano
Moderní formát pro ukládání obrázků, který byl navržený se zaměřením na vyšší kompresi než klasické formáty jako JPG nebo PNG při zachování kvality obrazu. Proto se skvěle hodí pro weby. Podporuje ztrátovou i bezztrátovou kompresi a dokonce zvládá i animace. Dnes už ho podporují všechny moderní prohlížeče, starší s ním mohou mít problém, proto je ideálním řešením fallback na JPG/PNG verzi obrázku.
AVIF
- AV1 Image File Format
- komprese: ano
- průhlednost: ano
- animace: ano
AVIF byl navržen jako konkurent k formátům jako JPEG, PNG a WebP a nabízí několik výhod, zejména v oblasti komprese a kvality obrazu. Má hodně efektivní kompresi (ale kvůli tomu je náročný na výkon). Stejně jako WEBP podporuje bezztrátovou a ztrátovou kompresi a podporuje alfa kanál (průhlednost). Podporuje HDR, což je skvělé pro moderní displeje a podporují ho všechny moderní prohlížeče.
TIFF
- Tagged Image File Format
- komprese: ano
- průhlednost: ne
- animace: ne
Ještě fousatější dědeček, než je GIF.
Je to flexibilní a všestranný formát pro ukládání rastrových grafických obrázků. Zvládá bezztrátovou kompresi, podporuje různé barevné režimy, včetně černobílého, stupně šedi, plnobarevných RGB, CMYK a YCbCr (což je zejména vhodné pro tisk nebo profesionální fotografii). TIFF podporuje vrstvy i vícestránkové dokumenty, takže můžete uložít víc obrázků do jednoho souboru. Jednou z nevýhod ale je, že TIFF soubory nebývají malé.
Animace a videa
MP4
- MPEG-4 Part 14
- komprese: ano
- průhlednost: ne
- animace: ano
MP4 je dnes nejpoužívanější formát pro video na webu. Nabízí velmi dobrý poměr mezi kvalitou a velikostí souboru a je široce podporovaný napříč zařízeními i prohlížeči. Nejčastěji se setkáte s kodekem H.264 nebo novějším H.265 (HEVC), které umožňují vysokou míru komprese při zachování dobré obrazové kvality.
Je ideální pro delší videa, ukázky, hero videa na webu nebo background videa. MP4 podporuje zvuk i různé snímkové frekvence, ale neumí průhlednost. Díky své kompatibilitě je to nejbezpečnější volba, pokud chcete video přímo hostovat na webu bez použití externích platforem.
AVI
- Audio Video Interleave
- komprese: ano (záleží na kodeku)
- průhlednost: ne
- animace: ano
AVI je starší videový formát vyvinutý společností Microsoft. Sám o sobě neurčuje způsob komprese – kvalita i velikost souboru se odvíjí od použitého kodeku. Právě kvůli tomu mohou mít AVI soubory velmi rozdílné vlastnosti a často i zbytečně velkou velikost.
Na web se AVI příliš nehodí. Má horší podporu v moderních prohlížečích, nepočítá s efektivním streamováním a ve srovnání s MP4 je méně optimalizovaný pro online použití. Dnes se používá spíše pro archivaci nebo práci s videem v desktopových aplikacích. Pokud narazíte na AVI video určené pro web, je téměř vždy lepší ho převést do MP4.
GIF
- Graphics Interchange Format
- komprese: ano
- průhlednost: ano
- animace: ano
Stále oblíbený formát, který je vhodný pro jednodušší videa kvůli své omezené paletě barev. GIF je jeden z nejstarších a nejznámějších formátů pro ukládání obrázků nebo videí. Bohužel má omezenou grafikou paletu pouhých 256 barev a umí bezztrátovou kompresi, která je hodně efektivní, pokud jsou v obrázku velké oblasti jedné barvy. Umí i průhlednost, ale ne částečnou (tj. buď je pixel plně barevný nebo průhledný). Tohle všechno ale stačí pro krátké animace nebo meme internetu.
APNG
- Animated Portable Network Graphics
- komprese: ano
- průhlednost: ano
- animace: ano
Je to formát, o kterém jste možná ani neslyšeli. Je to vlastně rozšíření formátu PNG a hodí se pro krátké animace a videa. Oproti GIF má výhodu v průhlednosti a široké paletě barev. Problém je, že není plně podporován všude. Jeho nevýhodou ale může být větší velikost výsledného souboru a menší podpora v prohlížečích.
Vektorová grafika
Vektorové formáty mají jednu velkou výhodu – ať je zvětšujete, jak chcete, vždycky zůstanou ostré.
SVG
- Scalable Vector Graphics
- komprese: ne
- průhlednost: ano
- animace: ano
Jde vlastně o XML zdrojový kód, který pomocí křivek popisuje požadovaný obrázek. Díky tomu může být neomezeně zvětšen bez ztráty kvality, protože se nerozmaže. Je ideální všude tam, kde potřebujete škálovat grafiku a mít ji vždy ostrou. Snadno můžete XML editovat i v textovém editoru, podporuje i animace, ale není vhodný pro komplexní fotografie.
Nedoporučené formáty obrázků pro web
RAW
- “raw”
- komprese: ne
- průhlednost: ne
- animace: ne
Tohle je surová (doslova, z angličtiny “raw“) fotografie se všemi daty a žádnou kompresí. Je to skvělý výchozí bod, ale pokud ji chcete kdekoli na webu použít, je třeba ho převést do jiného formátu a zkomprimovat.
HEIC a HEIF
- High Efficiency Image Coding resp. High Efficiency Image File Format
- komprese: ano
- průhlednost: ano
- animace: ne
HEIC i HEIF jsou moderní formáty pro ukládání obrázků, které nabízí lepší kompresi a další vylepšení proti klasickým JPG. Oba podporují HDR, a HEIF dokonce i panoramata, sérii snímků nebo animace. Zvládají alfakanál a často se používají na mobilech (zejména iPhone).
Jaké formáty obrázků používat?
Moje doporučení:
- Pozadí
- u komplexních obrázků JPG/WEPB/AVIF,
- pokud potřebujete průhlednost, pak PNG/WEPB/AVIF,
- (pokud vložíte SVG jako obrázek na pozadí, “stane” se z něj klasický rastrový obrázek),
- Fotky
- JPG/WEBP/AVIF
- Bannery
- JPG/WEBP/AVIF
- PNG, pokud je průhledný
- GIF, pokud je animovaný
- Logo nebo ikony
- SVG (preferovaná varianta)
- PNG (když není zbytí)
- Video
- ideálně nahrané na YouTuBe (nebo Vimeo a podobné služby),
- pokud je přímo na webu, pak MP4 s kompresí, menším snímkováním (často stačí i beze zvuku).
Zdroje:
