Formát obrázků WebP není žádná novinka v internetovém prostředí, přesto se až v posledních pár letech učíme s tímto formátem souznít. Především proto, že až 80 % návštěvníků webu přichází skrze mobilní zařízení, které nám s každým novým modelem nabízí ještě dokonalejší rozlišení, kde neodpouštíme žádný zmrzačený pixel. Také netolerujeme dlouhé načítání, každá mikrosekunda strávená na webu navíc nás odrazuje.
A právě do těchto těžkých okolností přichází zachránce kvality – formát WebP.
Co je WebP?
Psal se rok 2010, kdy společnost Google uvedla do světa nový formát obrázků, který se inspiroval u formátu WebM. Google měl cíl jasný. Vytvořit formát, který zcela nahradí JPEG a PNG, ale přitom zachová kvalitu a zároveň minimalizuje velikost a rychlost přenosu. WebP kombinuje algoritmy pro kompresi bez ztráty kvality (lossless) a s kompresí s viditelnou ztrátou kvality (lossy). Díky tomu může dosahovat velkých úspor v velikosti souborů bez ztráty kvality.
Od uvedení do digitálního světa uběhlo spoustu let a přesto jsme my, uživatelé, zaseklí při tradičních verzích JPEG, PNG nebo GIF, protože se bojíme změn a je opravdu náročné je aplikovat.
Nikdo nemá čas na změnu! A možná nedostatek času by měl být ten důvod, proč nahradit své obrázky na webech na WebP, neboť právě rychlost přenosu je u WebP formátu klíčová.
Jaký je vlastně rozdíl mezi formáty JPEG, PNG a WebP?
Ať se nám nihilisticky zdá, že na formátech obrázků nezáleží, pojďme se přesvědčit o opaku. Protože detaily jsou to, na čem koneckonců záleží nejvíce.
JPEG (Joint Photographic Experts Group)
Formát JPEG byl vyvinut jako standard pro ukládání a sdílení digitálních fotografií. Hlavní výhodou formátu JPEG je to, že podporuje ztrátovou kompresi, což znamená, že soubory mohou být zmenšeny na mnohem menší velikosti.
PNG (Portable Network Graphics)
PNG je formát souboru určený pro zobrazování obrázků na webu, který podporuje bezeztrátovou kompresi. To znamená, že soubory jsou menší, aniž by došlo ke ztrátě kvality obrazu. Hlavní výhodou formátu PNG je to, že podporuje průhlednost, což umožňuje vytvářet obrázky s čistými hranami, jako jsou loga a ikony.
WebP
WebP je moderní formát souboru vyvinutý společností Google. Tento formát kombinuje ztrátovou i bezeztrátovou kompresi, což umožňuje dosáhnout menší velikosti souborů při zachování vysoké kvality obrazu. Hlavní výhodou WebP je to, že se jedná o komprimovaný formát, který nabízí lepší kvalitu než JPEG při zachování malé velikosti souboru.
Zároveň podporuje průhlednost a animace, takže nahrazuje PNG a GIF zároveň. Formát WebP se rychle stává populárním v oblasti web designu a vývoje webových aplikací, protože umožňuje vytvářet soubory obrázků, které se načítají rychleji a snižují tak dobu načítání stránek, což je pro uživatele klíčové.
Šetříme data
Skutečné množství dat, které můžete ušetřit při použití formátu WebP, závisí na mnoha faktorech, jako jsou velikost a složitost obrázku, kvalita komprese a typ zařízení, na kterém je obrázek zobrazen. Nicméně jsou k dispozici statistiky a testy, které ukazují, že WebP může poskytnout až 30% úsporu dat v porovnání s formátem JPEG a až 50% v porovnání s formátem PNG. A to se vyplatí.
Podpora formátu WebP
Simpujeme už na všech webových projektech, které běží na WordPressu a občas si troufneme i bez fallbacku, protože drze tvrdíme, že pokud někdo používá neaktuální prohlížeč, tak si nezaslouží dokonalý doprovodný obrázek vidět.
Apple po smrti Jobse zaspal tak moc, že podporu WebP formátů zpřístupnil až v ostudném roce 2020. Tedy konkrétně, u kterých verzí prohlížečů můžete mít problém s formátem WebP?
- Internet Explorer: Verze před 9 nezvládají formát WebP. Od verze 9 je podpora WebP součástí prohlížeče. Verze Internet Exploreru 9 byla vydána 14. března 2011.
- Safari: Verze před 14 (včetně) nepodporují formát WebP. Od verze 14 je podpora WebP k dispozici. Verze Safari 14 byla vydána 16. září 2020.
- Opera: Verze před 11.10 nezvládají formát WebP. Od verze 11.10 je podpora WebP součástí prohlížeče. Verze Opera 11.10 byla vydána 12. dubna 2011.
- Android: Verze před 4.0 (Ice Cream Sandwich) nezvládají formát WebP. Od verze 4.0 je podpora WebP k dispozici. Verze Android 4.0 (Ice Cream Sandwich) byla vydána 19. října 2011.
- iOS: Verze před 14 (včetně) nepodporují formát WebP. Od verze 14 je podpora WebP k dispozici. Verze iOS 14 byla vydána 16. září 2020.
Tedy i přesto, že nechceme spoléhat na svéprávnost uživatelů a jejich pravidelnou aktualizací prohlížečů, tak bychom měli být v suchu. Teoreticky.
E-shopy a WebP
Shoptet, jakožto jednička v CMS (Content Management System), WebP obrázky stále nepodporuje. Pro kompresí si připlaťte doplněk Pobo Page Builder nebo službu Cloudflare. Zdarma vám nikdo nic nedá. Kromě Shoptet e-shopu o max. 10 produktech, bez doplňků, které mohou brzdit funkčnost vašeho e-shopu. To be honest, stejně je to více, než byste měli žádat.)
Další české CMS se rozhodly ignorovat WebP také. Eshop-rychle WebP nepodporuje. A FastCentrik, vyvíjen společností NetDirect, zaspal dobu a žije v minulosti a už si ani nesnaží.
Použití nám tak v českých vodách zůstává pouze u WordPressu, zatímco se zkříženými prsty doufáme, že i české CMS dovolí používat dokonalý formát WebP.
A co socky?
Sociální sítě nepotřebují nižší komprese obrázků, protože je úspěšně deformují sami, aby ušetřili, co největší množství dat. Nahrávejte, jako vždy, formát PNG a doufejte, že vám pár pixelů pro rozpoznání vaší tváře či produktu postačí.
Zároveň na sociálních sítích není vaše starost, jak rychle se FYP vykreslí, jakožto pouhý uživatel buď berte, či nechte být.
Konvertujte na WebP
Téměř všechny grafické programy, které za to stojí, nabízí export do WebP. Pravděpodobně sáhnete po klasice jako Adobe Photoshop nebo online nástroji WebP Converter. Zde ale stojí za zmínku i český grafický software Photopea, se kterým je život jednodušší.
Větší ≠ lepší
I přesto, že převedete své dokonalé obrázky do WebP, tak to neznamená, že ušetříte mega moc dat. Nezapomínejte, že i samotné rozlišení obrázků nahraných na web hraje roli. Opravdu potřebujete extra/ultra/mega Full HD obrázek své večeře na blog v rozlišení 4000x4000px, když maximální zobrazení je 400x400px? Nepotřebujete. Zkrátka nahrávejte obrázky v požadovaném rozměru, vyhnete se tak zbytečnému chroustání dat a komprese je jednodušší.
Pokud tedy máte rádi rychlost a kvalitu, vsaďte na WebP a vytrvejte s námi než i ostatní redakční systémy podlehnou a zpřístupní manipulaci s moderními formáty.
