Nová generace formátu médií
pro zvýšení výkonu stránky

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.

Obrázek 1. Podpora formátu WEBP napříč prohlížeči
Obrázek 1. Podpora formátu WEBP napříč prohlížeči

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:

Obrázek 2. Kód s tagy pro obrázek
Obrázek 2. Kód s tagy pro obrázek

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.

Obrázek 3. Audit stránek pomocí aplikace Lighthouse
Obrázek 3. Audit stránek pomocí aplikace Lighthouse

Čtěte dál Tyto články vám nesmí uniknout

Vývoj

Rozhovor o otevřených datech aneb jak otvíráme data Česku

8 minut čtení

Vývoj

Vychytávky při kódění webu

5 minut čtení

Design

Config 2021 Figjam jako nový nástroj na online kolaboráciu

6 minut čtení

ZAUJALI JSME VÁS? Napište nám

Tým webstudia

Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte. Další informace