Formát .webp je moderní formát obrázků od Google, který nabízí vysokou kvalitu při menší velikosti souboru než JPEG nebo PNG. Podporuje ztrátovou i bezztrátovou kompresi, průhlednost (jako PNG) a animace (jako GIF). Výhody zahrnují rychlejší načítání webů, snížené datové přenosy a lepší výkon na mobilních zařízeních
Web nedokáže překonvertovat obrázek (např. png) do formátu webp. Pro překonvertování se musí použít vhodný online nástroj, jako je například TinyPNG. Poté už je možné nahrát obrázek ve formátu .webp do webu, jak jste zvyklí (tzn. do kostičky, do novinky atd.).
Výsledky z pagespeedu ⚡
Pagespeed je nástroj pro měření rychlosti, s jakou se načítají webové stránky. Analyzuje technické aspekty, jako je velikost souborů, optimalizace obrázků, načítání skriptů a výkon serveru, a poskytuje doporučení pro zlepšení rychlosti a uživatelského zážitku.
Udělali jsme test a vytvořili dvě stránky, kdy jednu stránku jsme naplnili obrázky ve formátu .jpg a .png a druhou stránku obrázky ve formátu .webp. Obě stránky obsahují stejné kostičky a jsou stejně rozložené (tzn. na první pohled totožné), jediný rozdíl je ve formátu obrázků.
Stránka naplněná formátem .jpg a .png
Na levém obrázku můžete vidět výkon na počítači a na pravém obrázku výkon na mobilu při naplnění stránky formátem .jpg a .png.
Z výsledků je vidět, že hlavně mobil dost pokulhává (červená barva). Když bychom se podívali do celého reportu (ne jen na tento screen ⬆️), tak uvidíme podrobnou diagnostiku toho, co by chtělo zlepšit. Nás ale momentálně zajímá jen "Zobrazujte obrázky ve formátech nové generace", což je právě formát .webp.
V diagnostice vidíme, že nám to hlásí možnou úsporu když použijeme právě tento zmiňovaný formát... tak tedy pojďme na to! 💪
Stránka naplněná formátem .webp
Opět na levém obrázku můžeme vidět výkon na počítači a na pravém obrázku výkon na mobilu při naplnění stránky formátem .webp.
Výsledek: U obou zařízení se podařilo zlepšit metriky a tudíž i celkový výkon. U desktopu se zlepšil výkon o 8 a u mobilu až o 20... berte tyhle čísla samozřejmě s rezervou (lehce se mění) ale rozhodně je vidět posun k lepšímu tedy k rychlejšímu. Tady ke zlepšení došlo opravdu jen díky přeplnění všech obrázků na stránce do formátu .webp, nic jiného se neměnilo.