Již v průběhu vytváření našich webových stránek jsme se zamýšleli nad tím, jak web co nejlépe optimalizovat pro prohlížeče. Jednou z věcí, které jsme řešili, byly samozřejmě obrázky. Naše stránky mají prezentační charakter, proto bylo jasné, že obrázků bude na webu spousta. Jak tedy skloubit větší množství obrázků a zároveň zachovat co nejnižší dobu načítání? Po zralé úvaze jsme se rozhodli pro použití formátu WEBP.
WEBP formát
Ač se může zdát, že je tento formát novinkou, není tomu tak. WEBP představil již v roce 2010 vyhledávač Google jako formát bitmapových obrázků. Hlavním cílem bylo zachování podobné kvality jako u formátů JPG či PNG při nižší velikosti a rychlejšímu načítání. Mezi další přednosti tohoto formátu patří podpora animací (dříve GIF) nebo také průhlednost (dříve PNG).
Podpora tohoto formátu napříč prohlížeči je dnes velice slušná. Nicméně najdou se i výjimky. Jednou z nich je náš starý dobrý Internet Explorer, druhou je Safari, které WEBP formát podporuje až od verze 14 a ještě s určitým omezením. Podporu nejen tohoto si můžete ověřit na caniuse.com.
Vzhledem k těmto omezením bylo vhodné hledat řešení, jak obrázky zobrazit také uživatelům, kteří tyto prohlížeče používají. Za nejvhodnější možnost považujeme doplnění tagu , v rámci kterého uvádíme alternativní zobrazování v podobě dalších formátů. Díky tomuto tagu necháváme na prohlížeči, aby si sám zvolil nejvhodnější variantu. Jinak řečeno, v případě, že prohlížeč nepodporuje WEBP formát, automaticky si stáhne další nabízenou variantu. V našem případě je to formát JPG.
Zápis kódu v HTML pak vypadá takto:
Po nasazení webu na produkci jsme prováděli testování za pomocí aplikace Lighthouse a zjišťovali jsme, jak si stojíme. Zjistili jsme, že oproti klasickému JPG formátu jsme díky WEBP formátu získali stejně kvalitní obrázky, které měli až o 30 % menší velikost. Když si spočítáme množství obrázků a fotek na našem webu, tak už se dostáváme na opravdu nezanedbatelná čísla.
