Optimalizace webu | 5. Obrázky

V případě pomalého webu je ve většině případů na vině špatná optimalizace obrázků. Samotné soubory webu mají velikost v jednotkách kB, zatímco obrázky jsou v jednotkách MB. Co tedy potřebujeme s obrázky provést, pokud chceme, aby náš web nezpomalovaly?

  • Provést kompresi obrázků s co nejmenší ztrátou
  • Najít vhodný formát obrázku.

Samotná komprese je u obrázků obvykle ztrátová, to znamená že zmenšením dojde ke ztrátě kvality. V dnešní době to však již nemusí být příliš znát. Obrázky mějte na webu ideálně ve formátu webp nebo v progresivním jpeg.

Progresivní jpeg

Jedná se upravený formát jpeg, který se dokáže načítat mnohem rychleji. Spíše než popisovat rozdíl načítání mezi klasickým jpeg a progresivním jpeg, bude lepší ukázat Vám příklad.

Načítání klasického jpeg

jpeg

Obrázek se tedy načítá postupně v plné velikosti, z tohoto důvodu trvá mnohem déle než se stáhne celý.

Načítání progresivního jpeg

progresivní jpeg

Obrázek se nahraje okamžitě celý ale ve snížené kvalitě a poté začne doplňovat a dopočítávat data.

WebP

Tento formát vymyslel Google přímo pro tvorbu webových stránek. Ideální je použít jej u loga, obrázků v záhlaví případně bannerů. Pro rozsáhlou galerii se vyplatí převést fotografie pouze do progresivního jpeg než do webp.

Jak a kde obrázky upravit?

V případě, že Vám grafik nebo fotograf připravuje fotografie na web, požádejte jej o převod do jednoho z těchto formátů, většina programů na úpravu fotek to již umí. Případně lze použít některý z online nástrojů. pokud využíváte CMS WordPress, lze využít i pluginy jako například Smush.

Pro převod JPEG na progresivní JPEG lze použít tento nástroj.

Pro převod obrázků do WebP lze použít tento nástroj.

Byl pro Vás tento návod užitečný?