WebP konvertor musí soubor skutečně přepočítat do jiného kodeku, protože pouhá změna přípony z .jpg na .webp obrázek nijak nezmenší a prohlížeč takový soubor navíc ani nezobrazí. Předchozí článek o mobilní optimalizaci obrázků popsal, jak element picture nabídne prohlížeči WebP jako primární zdroj a JPEG jako záložní variantu, tenhle text se věnuje kroku, který tomu předchází, tedy tomu, jak se z původního souboru vůbec WebP verze vyrobí. Volba mezi ztrátovým a bezztrátovým režimem převodu přitom rozhoduje o tom, jak moc se soubor nakonec zmenší.
Proč přejmenování přípony nefunguje
Formát souboru neurčuje koncovka v názvu, ale vnitřní struktura dat a způsob, jakým jsou pixely zakódované. WebP staví na jiném kompresním schématu než JPEG nebo PNG, odvozeném z principu vnitřních snímků video kodeku VP8, takže obsah souboru musí projít skutečným přepočtem. Bez tohoto kroku prohlížeč narazí na data, kterým jeho dekodér pro danou příponu vůbec nerozumí, a obrázek se buď nezobrazí, nebo se zobrazí poškozený.
Ztrátový a bezztrátový režim WebP
WebP na rozdíl od PNG nabízí obě varianty komprese v jednom formátu, jak popisuje tento materiál o formátu WebP jako alternativě k JPEG, PNG i GIF, podle kterého bezztrátové kódování zachová každý pixel beze změny a hodí se tam, kde dosavadní soubor byl v PNG kvůli ostrým hranám nebo průhlednosti. Ztrátový režim naopak část dat obětuje ve prospěch menšího souboru, podobně jako JPEG, ale s podporou alfa kanálu, kterou klasický JPEG nenabízí.
Kdy zvolit který režim při převodu
Fotografie s plynulými přechody barev snese ztrátovou kompresi bez viditelného rozdílu, zatímco screenshot rozhraní nebo ikona s ostrými hranami textu si lépe rozumí s bezztrátovým režimem, kde žádná hrana nezůstane rozostřená. Průhledný prvek, který byl dřív uložený jako PNG, jde tímto způsobem převést na WebP a zachovat si při tom alfa kanál i v případě, že se zvolí ztrátová komprese.
Jak nastavení kvality ovlivní výsledek
Podobně jako u JPEG jde i u ztrátového WebP nastavit míru komprese na škále přibližně od nuly do sta, kde vyšší hodnota znamená menší ztrátu, ale i větší soubor. Konkrétní hranice, od které se ztráta stane patrná, závisí na obsahu obrázku, takže se vyplatí u každé fotografie zvlášť porovnat výsledek s originálem, ne spoléhat na jedno univerzální nastavení pro celou sadu.
WebP jako záložní zdroj v elementu picture
Element picture z předchozího článku očekává, že WebP verze obrázku už existuje ve chvíli, kdy se stránka sestavuje, protože prohlížeč si sám vybírá mezi zdroji uvedenými v atributu srcset jednotlivých source tagů. Právě tady se hodí mít k dispozici obě verze, WebP i JPEG, vygenerované předem, aby starší prohlížeč dostal fungující záložní soubor a modernější prohlížeč zase menší WebP variantu. Bez tohoto páru souborů element picture nemá z čeho vybírat a fallback fakticky chybí.
Automatizace převodu na WebP ve WordPressu
Vedle jednorázového převodu online nástrojem existuje i cesta automatizace přímo v redakčním systému, jak popisuje tento přehled pluginů pro optimalizaci obrázků ve WordPressu, který zmiňuje řešení jako Smush, Imagify či EWWW Image Optimizer, jež dokážou WebP verzi vygenerovat automaticky hned při nahrání souboru do knihovny médií. Automatizace se hodí tam, kde web denně přibírá desítky nových souborů, zatímco pro jednorázovou přípravu jedné sady obrázků před publikací zůstává rychlejší online konvertor, u kterého se dá výsledek hned porovnat s originálem.
Kolik dat WebP oproti starším formátům obvykle ušetří
Typický příklad z praxe ukazuje, že JPEG o velikosti 300 kilobajtů se převodem na WebP zmenší na 180 kilobajtů, tedy zhruba o 40 procent. WebP bývá obecně o čtvrtinu až třetinu menší než JPEG při srovnatelné kvalitě, a tenhle rozdíl se u webu s desítkami obrázků promítne i do celkové doby načtení stránky.
Co online WebP konvertor s nahraným souborem udělá
Nástroj po nahrání souboru nabídne volbu mezi ztrátovým a bezztrátovým režimem a u ztrátové varianty i posuvník kvality, přičemž výsledek jde porovnat s originálem ještě před stažením. Dávkové zpracování víc souborů najednou umožňuje připravit celou sadu WebP variant pro element picture na jednom místě, aniž by bylo nutné každý soubor převádět zvlášť. Zachování průhlednosti u obrázků, které dřív byly ve formátu PNG, funguje automaticky bez dalšího nastavování.
Co se děje s nahranými soubory
Online nástroje tohoto typu obvykle zpracují soubor a po určité době, často po hodině od nahrání, data automaticky odstraní ze serveru. Původní obrázek zůstává nedotčený v zařízení uživatele, takže je možné kdykoliv zkusit jiné nastavení kvality a porovnat výsledek s předchozí verzí.
Nejčastější chyby v praxi
V praxi se u převodu obrázků na WebP opakuje několik podobných problémů:
- Ruční změna přípony souboru bez skutečného přepočtu dat do formátu WebP.
- Použití ztrátového režimu u screenshotu nebo ikony, kde hrany zbytečně ztratí ostrost.
- Vygenerování WebP verze bez zachování původního JPEG souboru jako záložního zdroje pro element picture.
- Ruční převod jednotlivých souborů na webu, kde by se lépe hodila automatizace přímo v redakčním systému.
Co si z tohoto postupu odnést
Převod na WebP vyžaduje skutečný přepočet dat, ne jen změnu přípony, a volba mezi ztrátovým a bezztrátovým režimem by se měla řídit obsahem obrázku. Dvojice WebP a JPEG souborů se navíc hodí uchovávat pohromadě, protože právě z ní vybírá element picture popsaný v předchozím článku.
Připravujete si u obrázků na webu WebP verzi předem jako součást publikačního procesu, nebo tenhle krok obvykle řešíte až dodatečně?
Související příspěvky:
Technická SEO analýza může položit základ k AI viditelnosti. Co by měl web splňovat, než ho AI vyhledávače začnou citovat?
Audit rychlosti webu a GIF compressor. Kde animace představují největší datovou zátěž?
Tvorba webu: Poptávka konkurenceschopných www
10 nejčastějších chyb v SEO optimalizaci e-shopu a jak se jim vyhnout