Tento článok je súčasťou série článkov, ktoré detailne rozpracúvajú jednotlivé oblasti
z hlavného pillar článku „Rýchlosť stránky je kráľ: Ako zrýchliť váš web a zlepšiť SEO“.
Zatiaľ čo hlavný článok poskytuje ucelený prehľad o tom, prečo je rýchlosť webu kľúčová
pre SEO, UX aj konverzie, táto séria ide viac do hĺbky a rieši konkrétne techniky,
ktoré majú v praxi najväčší dopad.
V tejto časti sa zameriame na oblasť, ktorá má zvyčajne
najväčší a najrýchlejší efekt na zrýchlenie webu – optimalizáciu obrázkov.
Ide o tému, kde vedia majitelia e-shopov a marketéri dosiahnuť citeľné zlepšenie
bez zásahov do dizajnu alebo vývoja.
Cieľom článku je ponúknuť jasné odpovede, praktické postupy (HowTo)
a štruktúrované informácie tak, aby bol obsah zrozumiteľný pre ľudí
a zároveň plne čitateľný pre vyhľadávače a AI systémy.
Optimalizácia obrázkov je najrýchlejší a najlacnejší spôsob, ako výrazne zrýchliť web – najmä e-shop.
V praxi práve obrázky tvoria 50–80 % celkovej veľkosti stránky.
Ak nie sú správne pripravené, spomaľujú načítanie, znižujú SEO skóre aj konverzie.
Prečo sú obrázky kritické pre rýchlosť a SEO
- Google hodnotí rýchlosť načítania hlavného obsahu (LCP)
- Najväčším prvkom býva často hero obrázok alebo produktová fotka
- Veľké obrázky zvyšujú dátovú záťaž najmä na mobile
Dobrá správa: správnou optimalizáciou obrázkov viete dosiahnuť
výrazné zrýchlenie bez zásahov do dizajnu.
1. Používajte moderné formáty obrázkov (WebP, AVIF)
Moderné formáty obrázkov dokážu zachovať rovnakú kvalitu pri výrazne menšej veľkosti súboru.
- WebP – dnes štandard, podporovaný všetkými modernými prehliadačmi
- AVIF – ešte menší objem dát, vhodný pre novšie prehliadače
V porovnaní s JPG alebo PNG dokážu WebP/AVIF znížiť veľkosť obrázka o
30–70 %, čo má okamžitý vplyv na rýchlosť webu.
Odporúčanie:
Hero bannery, produktové fotky a obrázky v kategóriách vždy ukladajte v moderných formátoch.
2. Používajte správne rozmery obrázkov
Jedna z najčastejších chýb e-shopov je používanie extrémne veľkých obrázkov,
ktoré sa následne len zmenšujú pomocou CSS.
- 4000 px obrázok zobrazený ako 400 px = zbytočné dáta
- Prehliadač musí stiahnuť celý obrázok, aj keď ho zobrazuje malý
Správny postup:
- pripravujte viac veľkostí obrázkov (napr. 400, 800, 1200 px)
- používajte
srcset a sizes
- pre mobily posielajte menšie verzie
Výsledok: rýchlejšie načítanie a lepšie Core Web Vitals bez zmeny vizuálu.
3. Lazy loading – načítanie obrázkov až pri scrollovaní
Lazy loading znamená, že obrázky sa nenačítajú všetky naraz,
ale až vtedy, keď sa používateľ k nim priblíži scrollovaním.
- zníženie počiatočného času načítania stránky
- menšia dátová záťaž na mobile
- lepšie hodnoty LCP a INP
Technicky ide o jednoduchý atribút:
<img src="produkt.webp" loading="lazy" alt="Produkt">
Pozor:
Lazy loading nepoužívajte na obrázky, ktoré sú hneď viditeľné po načítaní
(napr. hlavný hero obrázok).
Zhrnutie: čo optimalizácia obrázkov reálne prinesie
- rýchlejšie načítanie stránky
- lepšie SEO (Core Web Vitals)
- nižší bounce rate
- vyššie konverzie najmä na mobile
Linka na článok