Obrázky na e-shopu: jak je zmenšit, aby web letěl a produkty dál vypadaly dobře

Na většině e-shopů tvoří obrázky víc než polovinu přenesených dat. Zákazník přitom od fotky produktu chce dvě věci: aby byla ostrá a aby se zobrazila hned. Obojí jde, pokud víte, na co si dát pozor.

1. Nahrávejte fotky v rozměru, který web opravdu zobrazí

Fotka z telefonu má běžně 4000 × 3000 pixelů a několik megabajtů. Na kartě produktu se přitom zobrazí třeba v 600 pixelech. Prohlížeč pak stáhne celou velkou fotku jen proto, aby ji zmenšil. Zjistěte, jak široký je největší obrázek, který se na webu zobrazuje (typicky detail produktu nebo banner), a fotky zmenšete na tuto šířku, u displejů s vysokým rozlišením případně na dvojnásobek.

2. Vyberte správný formát

• JPEG je vhodný pro fotografie. Je všude podporovaný a při kvalitě kolem 75–85 % je rozdíl proti originálu pro oko téměř neviditelný.
• WebP bývá při stejné kvalitě menší než JPEG a zvládají ho všechny běžné prohlížeče. Shoptet ho ale nepodporuje, takže na e-shopu na Shoptetu zůstaňte u JPEG (WebP se hodí na jiných webech).
• PNG se hodí na loga, ikony a grafiku s průhledností. Na fotografie ho nepoužívejte, soubory jsou zbytečně velké.
• SVG je nejlepší pro loga a jednoduché ikony, protože se nezpixeluje při žádné velikosti.

3. Komprimujte, ale nepřehánějte

Komprese je kompromis mezi velikostí souboru a kvalitou. U produktových fotek, kde zákazník hodnotí detaily materiálu nebo barvy, raději zůstaňte na vyšší kvalitě. U bannerů a fotek v pozadí může být komprese agresivnější. Vždy si výsledek prohlédněte v reálné velikosti, ne jen v náhledu.

Pro rychlé zmenšení si můžete vyzkoušet náš nástroj na kompresi obrázků. Funguje přímo v prohlížeči a zmenší fotku podle toho, kam na webu se bude zobrazovat.

4. Nenačítejte to, co zákazník ještě nevidí

Obrázky pod okrajem obrazovky nemusí prohlížeč stahovat hned. Atribut loading="lazy" řekne prohlížeči, ať je načte až těsně před zobrazením. Pozor ale na hlavní obrázek v horní části stránky: ten lazy loading mít nemá, protože by se zobrazil později, a právě on ovlivňuje, jak rychle stránka působí.

5. Nezapomeňte na popisky a názvy souborů

• Atribut alt popisuje obsah obrázku. Pomáhá nevidomým návštěvníkům a vyhledávačům, takže píšete věcně, například „Dámská kožená peněženka, hnědá“.
• Název souboru by měl dávat smysl: kozena-penezenka-hneda.jpg je lepší než IMG_4821.jpg.

6. Zkontrolujte, jestli nenahráváte stejnou fotku víckrát

Častá chyba: ve stejné galerii jsou originály v plném rozlišení a ještě ručně zmenšené kopie. Nahrávejte jednu rozumně velkou verzi a nechte ji zobrazovat v různých velikostech.

Rychlý kontrolní seznam

• Fotky mají rozměr odpovídající místu zobrazení, ne víc.
• Fotografie jsou JPEG, loga SVG nebo PNG.
• Hlavní obrázek se načítá hned, ostatní líně.
• Každý obrázek má smysluplný alt a název souboru.

Pokud si nejste jistí, kolik vás obrázky zpomalují, změřte stránku v nástroji PageSpeed Insights. Zjistíte tak, které fotky stojí za zmenšení jako první.