Zrychlete načítání webu s obrázky ve formátu WebP

Jedním z nejdůležitějších ukazatelů kvalitního webu je rychlost jeho načtení. Proto jsme se na inPage rozhodli přidat možnost práce s obrázky ve formátu WebP, který umožňuje zachovat vysokou kvalitu obrázků i při vyšší komprimaci a tím pádem výrazně zrychlit načítání webových stránek.

Rychlost načtení ovlivňuje vícero parametrů ale velikost obsahu, který se musí v prohlížeči načíst je jednou z těch nejdůležitějších. Proto je výhodné na web ukládat obrázky, komprimované. Obrázky v nižší kvalitě však na webu nevypadají dobře a obzvláště dnes, kdy většina zobrazovacích zařízení má vysoké rozlišení. Za tímto účelem vzniklo několik nových formátů pro obrázky, které umožňují zachovat vysokou kvalitu obrázku i ve výrazně nižší velikosti. Jedním z těchto formátů je WebP. Ten nabízí úsporu velikosti až 30 % na rozdíl třeba od formátu JPG.

Co je 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 formátu WebP napříč webovými prohlížeči je dnes již na velmi vysoké úrovni a s výjimkou zastaralého Internet Exploreru je zobrazení podporováno všude.

Podrobnější informace najdete v obrázku níže:

Jak převést obrázek do formátu WebP

Většina foťáků, či telefonů neukládá obrázky automaticky do formátu WebP a je proto nutné je před jejich vložením na web upravit a převést do daného formátu. Jak už padlo výše WebP je dnes již velice rozšířený formát a většina aplikací na úpravu fotek jej podporuje a můžete tak zde formát obrázku změnit. Pokud nevlastníte licenci na nějaký foto editor, tak existuje i celá řada online nástrojů na úpravu fotek. Z naší strany můžeme doporučit jednoduchou službu Squoosh která vám umožní upravovat fotky přímo z webového prohlížeče a nabízí možnost konverze fotky do velkého množství formátů včetně WebP.

Jak poznat kde na webu mám zbytečně velké fotky

Jistě vás bude zajímat jak poznat, že mám na webu zbytečně velké obrázky a kde přesně se nacházejí. V dnešní době existuje větší množství různých nástrojů, které měří rychlost načtení webu. My na inPage jsme si oblíbili nástroj Lighthouse od Google. Ten vám podá komplexní analýzu rychlosti načtení webových stránek a zároveň vám ukáže, kde přesně má váš web v rychlosti načtení mezery. Zároveň vám ukáže jak je na tom s kvalitou SEO  a dalšími parametry, které vyhledávače zohledňují při zobrazení webu v jejich výsledcích.

Lighthouse je možné zprovoznit buďto v prohlížeči Chrome jako doplněk. V případě, že nepoužíváte prohlížeč Chrome, tak má tento nástroj i své vlastní webové rozhraní, které najdete pod názvem Measure.

Závěrem

Doufáme, že podpora formátu obrázků WebP vám opět zlepší dostupnost a rychlost načtení vašich stránek. Určitě se můžete těšit na další novinky a vychytávky, které vám ještě více usnadní tvorbu a správu webových stránek na inPage. Pokud by vás cokoli zajímalo, tak nám napište na info@inpage.cz, anebo nám zanechte zprávu dole v komentářích.