WebP aneb formát nové generace 10 let poté

Pokud jste se nechali nalákat, že se spolu podíváme do budoucnosti, zklamu vás. První verze tohoto formátu pro rastrové obrázky vyšla 30. září 2010. Ani po deseti letech není použití tak snadné, jak si myslíte. V agentuře Beneš & Michl to řeším každý druhý den.

Image for post
Image for post

Už nějakou dobu doporuče nástroj Lighthouse od Googlu používat obrázky nové generace, kam patří právě WebP. Pokud tedy na webu používáte klasická jépégéčka nebo dokonce péngéčka, dá vám to skóre rychlosti webu hodně sežrat. Aby ne, obecné studie od Googlu říkají, že WebP je menší

  • u bezztrátových obrázků typu PNG o 26 %
  • u ztrátových obrázků typu JPG o 25–34 %
Image for post
Image for post
Výstup Google Lighthouse

Všichni chtějí WebP. Každý SEO audit se minimálně opře o výsledky Lighthouse a trvá na okamžité implementaci tohoto formátu do webu. Jenže…

Podpora prohlížečů stále chybí

Přibližně 20% uživatelů používá prohlížeče ve verzích, které WebP nepodporují. A to není malé číslo.

Image for post
Image for post
zdroj: https://caniuse.com/#search=webp

Největším problémem je Safari.

zdroj: https://caniuse.com/#search=webp

Apple definitivně potvrdil podporu WebP pro desktopové i mobilní Safari 14. Ta by měla vyjít letos na podzim. Před pár dny jsem testoval Safari 14 Technology Preview, bohužel zatím slibovaná podpora neexistuje.

Jak to zatím vyřešit?

Picture

Můžete použít párový element picture. Musíte prohlížeči naservírovat obrázek jak ve formátu WebP, tak v původním formátu. Safari si vybere původní formát a obrázek vykreslí. Jen ne vždy se vám hodí použít picture.

Image for post
Image for post
zdroj: https://www.vzhurudolu.cz/prirucka/webp

Modernizr

Modernizr je javascriptová knihovna, díky které můžete zjistit, jestli uživatelův prohlížeč podporuje (nejen) WebP. Můžete pak celé stránce přidat třídu .webp a třeba v CSS rozhodovat o zdroji obrázku. To se ne vždy hodí. Stále navíc potřebujete obě verze obrázku.

Image for post
Image for post
zdroj: https://www.vzhurudolu.cz/prirucka/webp

WebP polyfill, hurá?

První a snad jediný úspěšný polyfill webp-hero nepotřebuje skladovat na serveru obě varianty obrázku. Stačí jen soubor .webp. Jedná se o javascriptovou knihovnu, která detekuje podporu WebP, podobně jako Modernizr. V prohlížeči bez podpory převede WebP na JPG a v podobě base64 nahradí cestu obrázku v src.

Poměrně rychle přijdete zásadní problém. V Safari vám díky této knihovně přestanou fungovat formuláře. Issue na GitHubu je stále otevřené.

Naštěstí se mi podařilo najít řešení pro Safari, které problém s formuláři vyřeší.

Jak na Lazy loading?
Jednou z technik, jak nepřenášet zbytečná data k uživateli je lazy loading. Od Chrome verze 76 a Firefoxu 75 podporují nativní lazy loading, a tak nebudeme potřebovat další javascriptovou knihovnu. Na to si budeme muset také chvilku počkat.

Image for post
Image for post
zdroj: https://caniuse.com/#search=loading%3D%22lazy%22

V týmu používáme malou knihovnu vanilla-lazyload. Povedlo se mi ji “ukecat”, aby při načítání používala webpPolyfill() z předchozího příkladu.

Stejnou metodou je potřeba vyřešit i ajaxové načítání např. při stránkování. Uff. Není to nádhera, funguje to, ale nechci ani pomyslet na výkon v případě, kdy by na stránce bylo hafo obrázků.

Responzivní obrázky
V neposlední řadě tu máme responzivní obrázky. V daném kontextu si prohlížeč sám vybere velikost obrázku, o kterou zažádá na server. Šetří to data a u displejů s větším ppi naopak stahuje větší obrázky pro lepší zobrazení.

Tady jsem žádné řešení nenašel, protože ani webp-hero s atributem srcset pracovat neumí. Napadá mě snad jeden overkill, kdy za pomocí Modernizr zjistím podporu a pak všem srcsetům přepíšu příponu na .jpg. Nebo radši ne…

Máte lepší řešení? Podělte se o něj v komentáři :)

Řešení na straně serveru

Jako nejlepší a zároveň nejjednodušší se mi zdá řešení na straně webserveru. Odpadají tak všechny předchozí pokusy. Připravil jsem malé demo pro Apache, kde si to můžete sami vyzkoušet. Musíte splnit alespoň následující podmínky:

  • soubory v .jpg/.png i .webp
  • povolený mod_rewrite
  • mods-available/mime.conf osbahující webp

Řešení pro nginx najdete zde: https://github.com/uhop/grunt-tight-sprite/wiki/Recipe:-serve-WebP-with-nginx-conditionally. Za inspiraci díky @jansmitka!

Musíme si počkat

Techniky jako je lazy loading, responzivní obrázky i formát WebP používáme pro co největší uživatelský zážitek. Zatím to nemůžeme překombinovat. Je potřeba dávat velký pozor na Safari. Až bude Safari 14 rozšířené, bude svět frontenďáků zase o něco jednodušší :)

A pokud jste to ještě nezaznamenali, na světě je nový formát AVIF, který WebP prý strčí do kapsy. O něm ale budu psát až v roce 2030 ;)

Written by

Lead developer | Beneš & Michl | Czech Republic

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store