Jak na optimalizaci obrázků?

Na rychlosti načítání záleží! Pojďme se spolu podívat na jeden z nejčastějších problémů, se kterým se u svých klientů setkávám - a tím jsou špatně optimalizované obrázky. Naučte se správně optimalizovat obrázky a zrychlete tak výrazně načítání svého eshopu!

Věděli jste, že rychlost načítání má vliv také na Vaší pozici ve vyhledávání či na vaše marketingové kampaně na google, apod..? Ne? Tak teď už to víte a máte hned důvod, proč se tím zabývat...

Pravidla optimalizace obrázků:

1. Nepracujte se zbytečně velkými obrázky, používejte ideálně maximální zobrazovaný/vykreslovaný rozměr (nelze přesně napsat - prvek od prvku a eshop od eshopu se to liší)
2. Maximální rozměr delší strany obrázku 1920px (např. foto produktů - i tento rozměr už je ale víc než dost - větší obrázky nemá smysl nahrávat)
3. Pokud nepotřebujete průhledné pozadí, používejte vždy JPG formát (má menší datovou velikost než PNG formát)
4. Pokud pracujete s vektorovou grafikou, používejte vždy formát SVG
5. Provádějte tzv. kompresi obrázků

Jak zmenšit obrázek na určitý rozměr?

Obrázek je možné zmenšit téměř v jakémkoli grafickém programu, či programu na prohlížení fotografií. Můžete využít například Adobe Photoshop, Zoner Photo Studio, Affinity Designer nebo třeba online nástroje jako je https://www.photopea.com/ (online program zdarma od českého vývojaře - také nazýván jako "český photoshop") a další... Pro naší ukázku využijeme online nástroj Photopea, který mate k dispozici všichni.

1. Soubor > Otevřít (zkratka CTRL + O)
2. Vyberte obrázek se kterým chcete pracovat, klikněte na Otevřít
3. Soubor > Uložit jako > JPG
4. Změňte velikost, upravte název, upravte kvalitu na 100%
5. Klikněte na tlačítko Uložit

...a máme hotovo. Přesný postup naleznete na obrázcích níže (kliknutím zvětšete).

Převod obrázku z PNG do JPG formátu

Změnu formátu můžete provést přeuložením souboru v jiném formátu pomocí nástroje Photopea výše (nebo ve kterémkoli grafickém programu). Případně můžete využít jednoduchý online nástroj https://png2jpg.com/, kde stačí obrázky jednoduše nahrát a stáhnout.

Komprese obrázků - zmenšujeme datovou velikost!

Komprese obrázku funguje na principu odstranění některých barevných tónů z fotografie, které jsou pro lidské oko prakticky neviditelné a tím pádem reálně ani žádnou změnu na obrázku po kompresi neuvidíte. Jediné, čeho si můžete všimnout tak je razantní zmenšení datové velikosti převážně v rozmezí 70-90% oproti původnímu obrázku! Což je opravdu velký rozdíl. Kompresi můžete provést jak pomoci různých grafických programů (např. Adobe Photoshop), tak také pomoci online nástroje https://compressjpeg.com/. Sníženou datovou velikostí obrázků jsme urychlili jejich načítání a tím pádem i rychlost načítání celého eshopu. Což má pozitivní dopad nejen u zákazníků, kteří to jistě ocení, ale také u vyhledávačů, které se na tento faktor také dívají...