Formát obrázků WebP
26.09.2021 | Tag Web
WebP je skvělý formát pro obrázky vkládané na web. V článku bych s tímto formátem chtěla velmi krátce seznámit.
Formát WebP je další věc, o jejíž existenci jsem se dozvěděla díky Networkcat. Když jsem testovala v rámci Google Search Console své stránky, Google mi jako jeden z bodů k optimalizaci použití tohoto formátu doporučil.
WebP je formát obrázků od Google vhodný pro použití na webových stránkách. Podporují ho Chrome, Edge i Firefox a další běžné prohlížeče. Jeho obrovská výhoda je mnohem menší velikost souboru oproti formátu JPEG při zachování stejné kvality obrázku. Mimoto podporuje průhlednost a vytváření animací. Formát už podporuje mnoho grafických programů, ze kterých bych chtěla vypíchnout primárně GIMP, protože v něm grafiku pro web dělám.
Z pohledu webu a podpory všech možných prohlížečů je využití formátu WebP skvělé v kombinaci s HTML5 tagem <picture>. Tento tag umožňuje použít pro obrázek více zdrojů a nechat prohlížeč vybrat ten zdroj, který podporuje. Je tedy možné pro obrázek na webu jako primární zdroj určit obrázek ve formátu WebP a pokud ho prohlížeč nepodporuje, tak jako fallback dát stejný obrázek ve formátu JPEG. Vyžaduje to samozřejmě mít na serveru dvě sady stejných obrázků, ale pokud není místo na serveru problém a záleží primárně na výkonu webu, není proč váhat.
Pro ukázku, zde je obrázek ve formátu jpg:
A zde stejný obrázek ve formátu WebP (zde bude hodně záležet na tom, z jakého prohlížeče web pouštíte :)):
Pokud se podíváme na velikost souborů, je u WebP vidět úžasná úspora. Osobně s WebP nepracuji od začátku webu, ale co jsem začala na web dávat JPEG i WebP, v podstatě u každé WebP verze obrázku je velikost minimálně o polovinu menší při stejné kvalitě. A to je v rychlosti načítání obsahu stránky opravdu poznat.
Použití elementu picture pak vypadá takto:
<picture>
<source srcset="20210922_webp2.webp" type="image/webp" />
<img src="20210922_webp1.jpg" loading="lazy" alt="WEBP" />
</picture>
Pokud bychom se chtěli podívat, jak to v praxi funguje, stačí stránku vyvolat při otevřených Developer Tools. První screen pochází z Firefoxu, kde je vidět, že si jako formát zvolil WebP. Druhý screen je z Internet Exploreru, který si zvolil JPEG. Načítá se samozřejmě ta samá stránka, která dává mezi formátem WebP a JPEG na výběr. Firefox navíc respektuje lazy loading, takže obrázky se načítají až ve chvíli, kdy se na ně uživatel doscrolluje.
Jako poslední bych ukázala použití formátu v GIMPu. Zde stačí vytvářený nebo upravovaný obrázek pomocí Export As uložit v požadovaném formátu. WebP se dá najít ve výpisu podporovaných formátů. GIMP poté nabídne možnost uložit obrázek jako Lossless, ale pokud nám jde primárně o úsporu ve velikosti, není dobré to zaškrtávat. Obrázek bude i tak kvalitou srovnatelný s JPEG originálem (pokud tedy převádíme JPEG do WebP).
