Průvodce formáty obrázků pro web: JPEG, WebP, AVIF, PNG, GIF a SVG

Nedávno jsem si dělal rešerši obrázkových formátů. Které je možné používat v dnešních prohlížečích nebo minimálně byl učiněn pokus o to, abychom je používat mohli?

Rozhodl jsem se, že se s vámi o ni musím podělit. Kromě jiného jde o krásný přehled (zatím neúspěšného) boje o nástupnictví JPEGu, přičemž starý král se pořád drží.

To se nedá říct o jiných formátech, jako je GIF nebo PNG. Těmi tedy začneme.

GIF

• GIF (Graphics Interchange Format) uvedla firma CompuServe už v roce 1987.
• Používá bezeztrátovou kompresi, ale užití dnes limituje maximum 256 barev.
• GIF je na současném internetu synonymem pro krátké animace (koťátek), byť ty už většinou nejsou ukládány přímo v tomto formátu, ale často ve formátu krátkých videí.
• Z našeho seznamu jde už o nejvíc překonaný formát, nahraditelný PNG nebo WebP či nejnověji AVIFem.
• Podpora v prohlížečích: Všechny (CanIUse.com).
• Více: Wikipedie

PNG

• PNG (Portable Network Graphics) byl představen už v roce 1996 po licenčním zpoplatnění GIF.
• Je určený pro obrázky s bezeztrátovou kompresí. Není jako GIF omezený na 256 barev a zvládá osmibitovou průhlednost (tzv. alfa kanál).
• Kvůli nepřítomnosti ztrátové komprese se nehodí na obrázky typu fotografie. S animacemi je to u PNG horší (verze APNG je v prohlížečích podporována, ale nevyužívá se v autorských nástrojích).
• Nejefektivnější knihovny pro optimalizaci PNG na trhu jsou nyní pravděpodobně pngquant a oxipng.
• Podpora v prohlížečích: Všechny (CanIUse.com).
• Více: Wikipedie.

JPEG

• Představeno 1992. Název nese podle konsorcia Joint Photographic Experts Group.
• JPEG je určený pro ukládání fotografií a podobného obsahu. Tomuto obsahu už desetiletí vládne a ještě pravděpodobně dlouho bude díky tomu, jak je zavedený.
• Na webu je výhodou JPEG možnost progresivního vykreslování.
• Formát je omezený na 8bitové snímky a postrádá podporu pro alfa kanál. Možná je jen ztrátová komprese.
• Pravděpodobně nejefektivnější optimalizační knihovna na trhu je nyní MozJPEG.
• Podpora v prohlížečích: Všechny.
• Více: Wikipedie.

U nejpopulárnějšího formátu se ještě pojďme podívat na nejznámější „podverze“, se kterými postupně konsorcium JPEG přicházelo.

JPEG 2000

• Rok 2000. Používá se zkratka JP2.
• Je založený na vlnkové transformaci. Přidává funkce jako rozsah podporovaných bitových hloubek, flexibilní počet barevných rovin, bezeztrátová komprese, průhlednost atd.
• Ve ztrátové kompresi má údajně lepší výsledky než původní JPEG a v bezeztrátové lepší než PNG.
• Wikipedie také pravdivě uvádí, že se od JPEG 2000 „očekávalo, že nahradí originální standard JPEG, což se však nakonec nestalo“. Pravděpodobným důvodem je, že není zpětně kompatibilní s původní verzí formátu.
• Podpora v prohlížečích: Jen Safari (CanIUse.com).
• Více: JPEG.org, Wikipedia, Grafika.cz.

JPEG XR

• Rok 2006. Pokus ve spolupráci s Microsoftem – původně se formát označoval jako Windows Media Photo nebo HD Photo.
• Podpora v prohlížečích: Jen Explorer a starý Edge (CanIUse.com).
• Více: JPEG.org, Wikipedie.

JPEG XT

• Rok 2015. Série rozšíření (XT asi jako extension).
• Rozšiřuje JPEG o více-bitové hloubky a podporuje alfa kanál, bezeztrátovou kompresi atd.
• Zůstává zpětně kompatibilní.
• Podpora v prohlížečích: Nejspíš žádný.
• Více: JPEG.org, Wikipedia.

WebP

• Rok 2010, autorem je Google.
• Webp je založen na „intra-frame“ kódování z formátu kódování videa VP8. Podporuje bezeztrátové kódování a také bezeztrátový alfa kanál, ale ne například všechny možnosti JPEG 2000.
• Je koncipován jako náhrada JPEG i PNG. Ve většině případů s WebP získáte lepší výsledky než s těmito dvěma formáty.
• Podpora v prohlížečích: Všechny, jen v Safari až od macOS 11 BigSur (CanIUse.com).
• Více: WebP na Vzhůru dolů.

HEIF

• Byl představen v roce 2015 organizací MPEG (Moving Picture Experts Group). High-Efficiency Image File Format (HEIF) přichází se standardem videa High-Efficiency Video Coding (HEVC).
• HEIF je od roku 2017 používán zařízeními Apple k ukládání zaznamenaných snímků.
• Podpora v prohlížečích: Žádný (CanIUse.com).
• Více: Wikipedie.

AVIF

• V roce 2018 jej představila Alliance for Open Media jako součást otevřeného formátu kódování videa AV1.
• AVIF má obecně lepší kompresi než WebP, JPEG, PNG a GIF a je navržen tak, aby je nahradil.
• Zvládá ztrátovou i bezeztrátovou kompresi, alfa kanál, animace a mnoho dalšího.
• Nevýhodou je nemožnost postupného vykreslování, dlouhá doba převodu obrázku a zatím slabší podpora v prohlížečích.
• Podpora v prohlížečích: Chrome, Opera a brzy asi Firefox (CanIUse.com).
• Více: AVIF na Vzhůru dolů, Jake Archibald.

SVG

• První standard pochází z roku 2001. SVG je zkratka pro Scalable Vector Graphics.
• Jde o vektorový formát, ne jen pro obrázky, ale pro celé vektorové dokumenty.
• Chvíli trvalo než se prosadil, ale v současném světě webařiny je zcela nepostradatelný pro ikony, infografiky, animace a mnoho dalšího.
• SVG se samozřejmě z důvodu výkonu nehodí pro foto-realistické detaily. Původně zde stálo, že SVG neumí pracovat s 3D objekty, ale to podle Roberta Másla z komentářů není pravda. Děkujeme za doplnění. (Demo, které ale nyní funguje jen ve Firefoxu.)
• Podpora v prohlížečích: Všechny (CanIUse.com).
• Více: SVG na Vzhůru dolů, Téma „SVG“ na Vzhůru dolů, Wikipedie.

Další nové formáty v přípravě

Během psaní textu mám v hlavě rozmlžené informace ještě o následujících připravovaných formátech:

• JPEG-XL – aktualizace JPEG určené pro ztrátovou i bezeztrátovou kompresi, která by prý mohla být lepší než u WebP.
• WebPv2 – chystá se i nová verze WebP, ale zatím chybí více informací.

Uvidíme, jak se to s nimi vyvrbí.

Jaké formáty obrázků používat? Moje stručné rady

Dřívější praxe kodérů vypadala asi takto:

• Na fotky používejte JPEG.
• Na bannery, kde je text nebo obrázky s průhledností, používejte PNG.
• Na animace používejte GIF.

Myslím ale, že v poslední době se toho hodně změnilo.

Jednak — GIF se mě dneska už zdá zbytečný. Máme HTML5 video, animace děláme pomocí CSS, JS nebo SVG. Ale jasně, animovaná koťátka jej udrží při životě ještě dlouho.

Moderní formáty jako WebP nebo AVIF umí řešit scénáře určené dříve specificky pro JPEG (fotky) i PNG (bannery). Podpora WebP je už velmi slušná.

Pokud by mi to tedy moje pracovní postupy dovolily, upřednostňoval bych WebP a konkrétní obrázky optimalizoval ještě jako AVIF, který má fantasticky nízký datový objem, ale dlouho trvá převod souboru.

Mít soubor také v JPEG je zatím většinou nutné jako alternativní řešení pro starší prohlížeče.

Pro srovnávání vzhledu obrázku v různých formátech existuje skvělý nástroj – Squoosh. Je to velmi dobrý pomocník pro určení, jaký formát se pro vaše typy obrázků hodí.