Obrázky produktů: největší brzda e-shopů (a jak ji uvolnit)

Proč zrovna obrázky e-shop tolik brzdí?

Protože jich je hodně a jsou velké. Výpis kategorie běžně zobrazuje 20–40 produktových fotek najednou a jediná neoptimalizovaná fotka může mít víc dat než celý zbytek stránky. Podle statistik HTTP Archive tvoří obrázky u typického e-shopu 50–70 % datové velikosti stránky.

Na počítači s rychlým připojením si toho nevšimnete. Zákazník na mobilu v obchodním centru ano — a podle měření Googlu roste pravděpodobnost odchodu o 32 %, když se načítání protáhne z 1 na 3 sekundy.

Jaké rozměry fotek jsou správné?

Takové, v jakých se skutečně zobrazují. Nejčastější chyba, kterou v praxi vidíme: fotka z mobilu nebo od dodavatele se nahraje tak, jak je — 4000 × 3000 pixelů, 3–8 MB. Zákazník ji přitom uvidí v okénku širokém pár set pixelů.

Prohlížeč si obří fotku stáhne celou a teprve pak ji zmenší. Je to, jako byste kvůli jedné skleničce vody objednali cisternu.

Praktická pravidla:

• Produktové fotky nahrávejte v rozměru kolem 1500–2000 px na delší straně — to bohatě stačí i pro zoom detailu.
• Bannery a fotky ve slideru připravte přesně na míru šabloně, typicky do 1920 px šířky.
• Velikost souboru u produktové fotky by se měla vejít do 100–300 kB, u banneru do 500 kB.

Co je WebP a proč ho chtít?

WebP je moderní obrazový formát od Googlu, který umí stejnou fotku ve stejné kvalitě uložit o 25–35 % úsporněji než klasický JPEG. Pro zákazníka se nic nemění — fotka vypadá stejně, jen se rychleji stáhne.

Podporují ho všechny současné prohlížeče, takže dnes už není důvod ho nepoužívat. Pokud vám PageSpeed Insights hlásí „Zobrazujte obrázky ve formátech nové generace", mluví právě o tomhle.

Nezhorší komprese kvalitu fotek?

Při rozumném nastavení ne — lidské oko rozdíl nepozná. Komprese funguje tak, že z fotky odstraní detaily, které oko stejně nevnímá. U JPEG i WebP se kvalita nastavuje na stupnici 0–100 a hodnota kolem 80–85 je zlatý střed: soubor se zmenší na třetinu až polovinu, vizuálně se nic nestane.

Problém nastává až při agresivní kompresi (pod 60), kdy se objeví „kostičkování" kolem hran. Tam u produktových fotek nikdy nechoďte — fotka prodává.

Co je líné načítání obrázků?

Líné načítání (lazy loading) znamená, že prohlížeč stáhne jen obrázky, které jsou právě vidět na obrazovce, a zbytek až ve chvíli, kdy k nim zákazník doskroluje. U dlouhých výpisů kategorií to ušetří i 80 % zbytečně stažených dat.

Jak to řeší PrestaShop a co musíte udělat vy?

PrestaShop má základ připravený: z každé nahrané fotky si sám vygeneruje sadu miniatur v různých velikostech (pro výpis, detail, košík) a novější verze umí zapnout generování WebP přímo v nastavení. Moderní šablony mají líné načítání zabudované.

Co ale za vás neudělá:

• Nezmenší obří zdrojové fotky — ty zabírají místo na disku a zpomalují zálohy i generování miniatur.
• Nepřegeneruje staré miniatury sám — po zapnutí WebP nebo změně šablony je potřeba nechat obrázky přegenerovat, jinak se změna na starých produktech neprojeví.
• Nepohlídá bannery a obrázky v popiscích — co vložíte do editoru ručně, jde na web tak, jak jste to nahráli.

U starších verzí PrestaShopu (1.6 a 1.7, jejichž podpora už skončila) navíc WebP v základu chybí a řeší se moduly nebo úpravou — to už je práce pro vývojáře.

Kdy se vyplatí přizvat odborníka?

Když má e-shop stovky až tisíce produktů s neoptimalizovanými fotkami, ruční oprava nedává smysl — existující obrázky se dají zpracovat hromadně na serveru, bez klikání po jednom. Stejně tak zapnutí WebP na starším e-shopu nebo kontrola, že šablona opravdu používá správné velikosti miniatur, je otázka pro někoho, kdo PrestaShop zná do hloubky.

Pro e-shopy v naší dlouhodobé správě tohle řešíme automaticky — včetně kontroly obrázků po každém importu produktů.

Shrnutí

Obrázky jsou u většiny e-shopů brzda číslo jedna, ale zároveň nejsnáze odstranitelná: rozumné rozměry před nahráním, komprese na kvalitu ~85, formát WebP a líné načítání. Výsledek poznáte na skóre v PageSpeed Insights i na spokojenosti zákazníků na mobilu.