PNG je spolehlivý formát nabízející bezztrátovou kompresi, podporu průhlednosti, ostrou grafika. Jenže na webu má jednu nepříjemnou vlastnost: soubory jsou velké a optimalizace PNG souborů je tak téměř nutností. Formát WebP je naproti tomu ve většině případů o 25 až 35 procent menší při stejné nebo lepší vizuální kvalitě. Otázka tedy není jestli konvertovat, ale kdy a co.
Proč WebP nad PNG vyhrává ve většině situací?
WebP vznikl v Googlu jako formát navržený přímo pro web. Podporuje průhlednost stejně jako PNG, zvládá bezztrátovou i ztrátovou kompresi a moderní prohlížeče ho bez výjimky přijímají. Chrome, Firefox, Safari, Edge. Podpora je od roku 2022 plošná, takže obavy z nekompatibility jsou dnes bezpředmětné.
Rozdíl v praxi je oproti PNG znatelný. PNG screenshot s textem a grafikou o velikosti 400 kB se po konverzi do WebP smrskne na 260 až 280 kB, aniž by oko zaznamenalo rozdíl. U fotografií nebo komplexní grafiky bývá úspora ještě výraznější. Pro web, kde každý kilobajt ovlivňuje rychlost načítání a skóre Core Web Vitals, to není zanedbatelné.
Kdy PNG na WebP převádět rozhodně má smysl?
Konverze dává největší smysl u fotografií uložených jako PNG. To je ostatně nejčastější zbytečnost, se kterou se na webech setkáte. Někdo vyfotí interiér, vyexportuje ho jako PNG protože „to vypadá lépe“ a nahraje soubor o velikosti dvou megabajtů. Stejná fotka jako WebP bude mít 600 až 800 kB při ztrátové kompresi, nebo přes megabajt při bezztrátové, ale pořád výrazně méně.
Stejně jasná je situace u screenshotů uživatelského rozhraní, produktových obrázků v e-shopu nebo ilustrací v článcích. Všude tam WebP přinese menší soubor bez viditelné ztráty kvality.
Velké PNG soubory bez průhlednosti jsou kandidátem číslo jedna. Pokud váš obrázek nepotřebuje alfa kanál, neexistuje prakticky žádný důvod zůstávat u PNG.
Kdy raději PNG nechat být?
Jsou situace, kde konverze smysl nedává nebo kde je lepší sáhnout po zcela jiném formátu.
Loga a ikony v jednoduchých barvách s průhledným pozadím jsou ideálním materiálem pro SVG, ne WebP ani PNG. SVG je vektorové, libovolně škálovatelné a soubor mívá jen pár kilobajtů. Pokud logo existuje pouze jako rastr, WebP je přijatelná náhrada, ale SVG je lepší řešení.
Druhý případ jsou obrázky určené ke stažení, tisku nebo dalšímu zpracování. Tam zůstaňte u PNG. WebP není formát pro archivaci ani tisk, je formát pro web. Pokud návštěvník obrázek stáhne a chce ho otevřít v grafickém softwaru nebo poslat do tiskárny, PNG je bezpečnější volba.
Třetí výjimku tvoří situace, kde pracujete se starším interním systémem nebo aplikací, která WebP nečte. To je dnes vzácné, ale stává se to.
Jak konverzi udělat správně?
Nejjednodušší cesta pro jednotlivé soubory je webová aplikace Squoosh od Googlu. Nahrajete PNG, vyberete WebP jako výstupní formát, posunete slider kvality a hned vidíte srovnání originálu s výsledkem. Pro běžnou grafiku funguje kvalita kolem 80 až 85. Pro fotografie zkuste 75 a porovnejte vizuálně.
Pro hromadnou konverzi je nejlepší nástroj cwebp z balíčku Google WebP tools. Jde o příkazový řádek, ale použití je přímočaré:
cwebp -q 80 obrazek.png -o obrazek.webp
Parametr -q nastavuje kvalitu od 0 do 100. Pro bezztrátovou kompresi přidejte přepínač -lossless. Hromadnou konverzi celé složky zvládnete jednoduchým bash skriptem nebo nástrojem ImageMagick.
Na WordPressu situaci řeší pluginy ShortPixel nebo Imagify. Po instalaci automaticky konvertují nahrané obrázky do WebP a servírují je prohlížečům, které formát podporují. Originál PNG zůstane zachován jako záloha. Nastavení je otázka minut a od té chvíle se o nic nestaráte.
Pro vývojáře pracující s Node.js je Sharp knihovna, která zvládne konverzi, změnu rozměrů i kompresi v jednom průchodu. Integruje se do build procesu a funguje i serverově při nahrávání souborů uživateli.
Na co při konverzi nezapomenout?
Průhlednost se při konverzi do WebP zachová automaticky, ale pouze pokud použijete bezztrátový režim nebo kvalitu dostatečně vysokou na to, aby artefakty komprese nebyly vidět na hranách průhledných ploch. U log a ikon s ostrými hranami a průhledným pozadím zkontrolujte výsledek zblízka.
Metadata jako EXIF data nebo ICC barevný profil se při konverzi chovají různě podle nástroje. Squoosh metadata standardně odstraňuje, cwebp je přenáší. Pro web je obvykle lepší metadata smazat a ušetřit tím další kilobajty. Barevný profil sRGB je výjimka, ten zachovávejte.
Po konverzi vždy otestujte, jak soubory vypadají na různých zařízeních a obrazovkách. To, co vypadá dobře na zkalibrovaném monitoru, nemusí sedět na průměrném laptopu nebo telefonu.
Formáty se mění, rychlost webu zůstává
Konverze PNG na WebP je krok, který se vyplatí udělat jednou a mít ho za sebou. Weby, které ho odkládají, platí průběžně v podobě pomalejšího načítání, horšího skóre Lighthouse a uživatelů, kteří potenciálně odejdou dřív, než se stránka načte. Konverze, která zabere jen chvíli vašeho času, tomu snadno zabrání.
