Ako zrýchliť web: optimalizácia obrázkov

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