Obrázky v e-shope: WebP, AVIF a chyba, ktorá spomaľuje hlavnú fotku

Keď sa e-shop načítava pomaly, majitelia najčastejšie hľadajú vinníka v doplnkoch a skriptoch. Dáta z reálnych návštev ukazujú, že prvou podozrivou by mala byť fotka. Podľa Web Almanac 2025, ročného prehľadu HTTP Archive, je najväčším viditeľným prvkom stránky (metrika LCP) obrázok na 76 % mobilných a 85,3 % desktopových stránok. Na e-shope, kde sa celá stránka točí okolo produktovej fotky alebo hlavného bannera, to platí ešte viac.

Prečo je hlavný obrázok tak dôležitý

LCP meria, kedy sa na obrazovke zobrazí najväčší obsah. Google za dobrú hodnotu považuje 2,5 sekundy a menej na 75. percentile návštev. Ak je tým prvkom obrázok, jeho načítanie je zároveň dôvodom, prečo je LCP dobré alebo zlé. Odporúčanie Googlu je rozdeliť čas približne takto: 40 % na odpoveď servera, menej než 10 % na čakanie pred začiatkom sťahovania obrázka, 40 % na samotné stiahnutie a menej než 10 % na zobrazenie. Časť „čakanie pred začiatkom sťahovania“ je pritom pre majiteľa najzaujímavejšia, lebo ju zvyčajne spôsobí chyba v nastavení, nie slabý server.

Najčastejšia chyba: lenivé načítanie hlavnej fotky

Atribút loading="lazy" je výborný nápad pre obrázky, ktoré zákazník uvidí až po rolovaní. Google ho odporúča pre všetko mimo prvej obrazovky, ale výslovne pripomína, že obrázky, ktoré sa zobrazia hneď po načítaní, najmä LCP obrázok, sa lenivo načítavať nemajú. Dôvod je jednoduchý: prehliadač odloží sťahovanie, kým nezistí, že obrázok je vo viditeľnej časti, a hlavná fotka sa objaví neskôr, než mohla.

Napriek tomu to robí asi 17 % stránok. Často za to nemôže vývojár, ale šablóna alebo optimalizačný doplnok, ktorý lenivé načítanie zapne na všetky obrázky naraz. Ak chcete hlavnej fotke pomôcť, nastavte jej fetchpriority="high". Prioritu využíva len okolo 17 % stránok a Google pripomína, že vysoká priorita pre viac než jeden či dva obrázky stráca zmysel.

Rozmery: obrázok nesmie posúvať stránku

Druhá častá chyba sa netýka rýchlosti, ale stability. Obrázok bez udanej šírky a výšky sa načíta, až keď príde, a obsah pod ním sa posunie. To je metrika CLS, ktorej dobrá hodnota je 0,1 a menej. Google radí uvádzať width a height pri všetkých obrázkoch (alebo vyhradiť miesto cez CSS aspect-ratio) a pri responzívnych obrázkoch držať pomer strán rovnaký pre všetky varianty veľkosti. Stránka s fotkami produktov, ktorá „poskakuje“, sa zákazníkovi nelíbi a v meraní Core Web Vitals ju zrazí.

WebP a AVIF: koľko ušetria

Staršie formáty JPEG a PNG sú univerzálne, no nové formáty ukladajú rovnaký obraz s menším počtom bajtov. Google o WebP uvádza, že stratový WebP je o 25 až 34 % menší než porovnateľný JPEG pri rovnakej kvalite podľa indexu SSIM a bezstratový WebP je o 26 % menší než PNG. AVIF je mladší formát (z roku 2019) a podľa údajov Can I use ho dnes podporuje 96,35 % prehliadačov na svete. Web.dev odporúča používať WebP alebo AVIF a ako zálohu nechať JPEG alebo PNG, na jednoduché logá a ikony SVG a animované GIF nahradiť videom.

Pozor na čítanie čísel. Ide o údaje výrobcu formátu a o priemer, ktorý sa líši podľa fotky. Pri fotkách produktov s hladkým pozadím môže byť úspora iná než pri textúrach alebo tkaninách. Stratová kompresia mení farby, preto je dobré porovnať odtiene pri produktoch, kde na farbe záleží (oblečenie, kozmetika, farby).

Koľko obrázkov váži celá stránka

Medián domovskej stránky obsahuje 911 KB obrázkov na mobile a 1 058 KB na počítači, vnútorná stránka 354 KB, respektíve 442 KB. Domovská stránka e-shopu s bannermi a zoznamami produktov sa k týmto hodnotám priblíži ľahko. Preto sa oplatí skontrolovať, či nenahrávate fotky v pôvodnom rozlíšení z fotoaparátu, a zmenšiť ich na skutočne zobrazenú veľkosť.

Číslo, ktoré stojí za zapamätanie, je váha celej stránky. Podľa Almanacu prejde všetkými tromi metrikami Core Web Vitals 70 % domovských stránok do 1 MB na počítači a 57 % na mobile, pri stránkach nad 5 MB je to 38 %, respektíve 30 %. Ide o súvislosť, nie o dôkaz príčiny. Medián jedného obrázka je len 8 KB (číta sa ako nižší aj kvôli drobným sledovacím pixelom) a medián počtu obrázkových požiadaviek je 17 na počítači a 15 na mobile. Problém teda nevzniká jednou obrovskou fotkou, ale tým, že sa na stránke hromadí desiatky stredne veľkých obrázkov a medzi nimi pár zbytočne veľkých.

Čo robiť na WooCommerce a Shoptete

WooCommerce (WordPress). Od verzie 6.5 WordPress dovoľuje nahrávať AVIF obrázky, ak to hosting podporuje. Podporu overíte v Nástroje, Stav stránky (Site Health), karta Informácie, časť Spracovanie médií. Oficiálna príručka výkonu odporúča optimalizovať všetky obrázky, zvážiť WebP, používať cache a CDN a odstrániť nepotrebné doplnky. Pri doplnkoch, ktoré konvertujú obrázky alebo zapínajú lenivé načítanie, si skontrolujte, či sa vzťahujú aj na prvú obrazovku.

Shoptet. V oficiálnej dokumentácii Shoptetu sme k formátu obrázkov nenašli nič, čo by sme mohli citovať, preto to nehádajte a zistite priamo. Otvorte produkt na mobile, pustite vývojárske nástroje (F12), v karte Network zapnite filter Img a pozrite stĺpec Type pri hlavnej fotke. Ak tam je jpeg a súbor má stovky kilobajtov, opýtajte sa dodávateľa šablóny alebo podpory Shoptetu, či sa dá fotka ukladať v menšom formáte.

Na čo si dať pozor pri nasadení

Prechod na nový formát nie je len otázka prepínača. Po prvé, AVIF vo WordPresse funguje, len ak ho podporuje knižnica na spracovanie obrázkov na serveri, takže na lacnejšom hostingu môže chýbať. Po druhé, ak do e-shopu pripojíte doplnok, ktorý obrázky konvertuje, otestujte, či sa starý formát skutočne ponúka ako záloha pre prehliadače bez podpory. Po tretie, po konverzii si prezrite hlavné produkty vedľa seba: pri stratovej kompresii sa môžu mierne zmeniť odtiene. Nakoniec zmeny nerobte naslepo. Zmerajte stránku pred zásahom a po ňom v rovnakých podmienkach, najlepšie na mobile, aby ste vedeli, čo ktorý krok priniesol.

Postup na jedno popoludnie

1. V PageSpeed Insights (návod) otvorte produkt a kategóriu a zapíšte si, ktorý prvok je LCP.
2. Ak je to obrázok, overte, že nemá loading="lazy", a pridajte mu fetchpriority="high".
3. Skontrolujte, či majú všetky obrázky šírku a výšku.
4. Hlavné bannery a fotky produktov prevedte do WebP alebo AVIF, s JPEG ako zálohou.
5. Po týždni porovnajte hodnoty LCP a CLS.

O tom, ako veľmi rýchlosť predáva, píšeme v článku Rýchlosť e-shopu. Rýchla fotka produktu pomáha aj tam, kde sa rozhoduje o nákupe: na produktovej stránke a v mobile, odkiaľ prichádza väčšina návštev.