Rychlost e-shopu: Optimalizace obrázků

Kodér a projektový manažer Aleš Rosa
Aleš Rosa
5 minut čtení

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é.

Víte o tom, že již 5 let pravidelně vždy první středu v měsíci posíláme výběr těch nejdůležitějších informací z e‑commerce scény?

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 PNG3,1 MB1 MB-68%
Obrázek JPG1,5 MB253 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.

Pagespeed

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 :). 

Přemýšlíte o změně? Kontaktujte nás

jednatelé společnosti

Buďte v obraze

IM Sraz

IM Sraz

Máme rádi středy, proto poslední středu v měsíci pořádáme pravidelné setkání s přednáškou s tématy točící se kolem e-commerce, podnikání na internetu a marketingu.
Příští IM sraz bude 1. října 2020
na téma Strategie v online od Honzy Kvasničky
Novinky

Newsletter

První středa v měsíci znamená zkoušku sirén. A taky 3IT newsletter plný novinek a tipů ze světa online podnikání, které pro Vás připravujeme již několik let. Buďte v obraze a sledujte náš e-commerce e-mailový měsíčník.
Kdy: První středy v měsíci
Odesláním souhlasíte se zpracováním osobních údajů.

Zajímají Vás informace pod pokličkou?

Sledujte nás na sociálních sítích
Dočetli jste se až sem a nenašli jste co potřebujete?
3IT úspěšný e-shop s.r.o
Studentská 17, Ostrava-Poruba, +420 602 449 719
© 2021 3IT úspěšný e-shop s.r.o
Všechna práva vyhrazena.