V minulém článku Rychlost e-shopu: PageSpeed Insights jsme si ukázali, jakým způsobem změřit rychlost, s jakou se váš e-shop načítá, a odhalit tak základní problémy, které je potřeba řešit. Jedním z bodů, který můžete vyřešit víceméně sami, bez nutnosti asistence developera vašeho projektu, je úprava a optimalizace obrázků. Píšu víceméně proto, že úplně sami bohužel všechny kroky nezvládnete. Z důvodu, že formát WebP není, ani po 10 letech od svého uvedení, podporovaný ve všech prohlížečích, tak se to bez asistence vývojáře neobejde, ale o tom až za chvíli.

Z minulého testování tedy víme, že jednou z největších datových zátěží jsou obrázky. Pojďme se tedy podívat co s nimi můžeme udělat a jak je optimalizovat.
Rozlišení
Obrázky nahrávejte v optimálním rozlišení, které je vhodné pro vaše účely. Co to znamená? Pokud nahráváme obrázek, který bude zobrazený někde v textu, tak s největší pravděpodobností jej váš systém nezpracuje a nevytvoří vhodné náhledové obrázky v odpovídající velikosti. Proto nahrávejte obrázky v rozlišení, které je odpovídající velikosti, v jaké se bude zobrazovat na webu. Prohlížeč si s velkou fotkou sice poradí a zobrazí ji v potřebném rozměru, ale bude ji muset stáhnout v originální velikosti, což se projeví jak na pomalejším načítání fotky, tak i samotného webu.
Základní pravidlo proto zní, nenahrávejte fotky přímo z fotoaparátu, tedy ty ve velkém rozlišení. Před nahráním je zmenšete v nějakém programu na rozměr, který odpovídá rozměru na webu.
TIP: Pokud chcete myslet na uživatele, kteří mají zařízení s Retina displejem, tak nahrávejte fotografie v dvojnásobném rozlišení než je nutné.
Líné obrázky
Ač se snažíme web zrychlovat, tak teď vám budeme radit, abyste obrázky udělali línými. Řeč totiž bude o lazy loading, líném načítání. Pokud máte na stránce hodně obrázků, které jsou mimo viditelnou oblast obrazovky, tak je vhodné je načítat takzvaně líně (lazy). Lazy loading tedy zajistí, aby se uživateli načetl obrázek až v momentě, kdy se mu má zobrazit. Celý web se pak načítá mnohem rychleji, protože se hned nenačítají všechny obrázky, ale jen ty, co jsou viditelné nebo u kterých je předpoklad, že se brzy budou zobrazovat, jak uživatel bude scrollovat.
Komprese a optimalizace
Nejen správným rozměrem obrázku, ale i jeho kompresí a optimalizací můžeme významně zredukovat jeho velikost a zrychlit tak načítání. Jedním z nástrojů, který vám pomůže optimalizovat velikost obrázku bez viditelné ztráty kvality je online nástroj TinyPNG. Jak už jeho název napovídá je určený k optimalizaci PNG obrázku, poradí si však i s JPG obrázky. V případě PNG obrázku dokáže zredukovat jeho velikost o 40-60 % bez znatelného zhoršení kvality.
Testovaný obrázek jsme uložili ve formátu JPG (bez komprese) a PNG a provedli optimalizaci v nástroji TinyPNG.
Jak je vidět v tabulce, je úspora při použití optimalizovaného obrázku oproti výchozímu značná.
Před optimalizací | Po optimalizaci | Úspora | |
Obrázek PNG | 3,1 MB | 1 MB | -68% |
Obrázek JPG | 1,5 MB | 253 KB | -83% |
Proto nezapomeňte obrázky před nahráním na web zoptimalizovat. Úspora dat může být až v desítkách MB.

Koho chleba jíš, toho píseň zpívej
V minulém díle jsme v reportu z PageSpeed Insights viděli, že nám Google doporučuje zobrazovat obrázky ve formátech nové generace. A doporučovaný formát je WebP, se kterým v roce 2010 přišel právě Google. Bohužel podpora tohoto formátu se neobejde bez zásahu vývojáře, který musí do kódu doplnit podporu pro prohlížeče, které tento formát neumí zobrazit.
Zdroj: https://caniuse.com/?search=webp
Jak je z tabulky patrné, tak pokud nepočítáme podporu pro končící prohlížeč IE, tak z hlavních prohlížečů, pro které musíme podporu řešit, je to pouze Safari. To by mělo dostat podporu WebP v nadcházející verzi 14. Než se tak stane, je nutné myslet i na uživatele tohoto prohlížeče. Proto je potřeba mít obrázky, jak ve formátu JPG (PNG), který se bude zobrazovat uživatelům Safari, tak ve formátu WebP pro návštěvníky z ostatních prohlížečů.
Má tedy vůbec smysl zdvojovat obrázky a upravovat web pro podporu WebP? Pokud máte nějaký web nebo e-shop s množstvím obrázků v jedné stránce, tak určitě ano. Podle studie Google dojde u bezztrátových obrázků typu PNG ke zmenšení o 26 % a u ztrátových obrázků typu JPG o 25-34 %.
Tolik tedy k pravidlům pro zlepšení načítání obrázku na vaší stránce nebo e-shopu. Pokud implementujete všechna tato doporučení, ušetříte nejen datový přenos a zrychlíte načítání vaší stránky, ale hlavně Google vyhledávací roboti vás budou mít zas o něco raději :).
Mohlo by Vás také zajímat


Od Belbina ke Gallupu: Jak jsme objevili superschopnosti našeho týmu


Inteligentní překladač překonávající Google i ChatGPT-4

