Jak správně optimalizovat obrázky pro web: podrobný průvodce s příklady

Rychlost načítání je jedním z hlavních faktorů hodnocení Google (Core Web Vitals). Na českém a evropském trhu, kde lidé často používají mobilní internet a očekávají okamžitou odezvu, může zpoždění pouhé 3 sekundy snížit konverze až o 40–50 %.

Co přináší kvalitní optimalizace:

Vyšší rychlost:
Lehké obrázky se načítají okamžitě i při pomalejším 4G/5G.

Úspora rozpočtu:
Rychlý Landing Page snižuje cenu za získání leadu v Google Ads.

SEO efekt:
Google rozumí obsahu obrázků díky atributům Alt a preferuje technicky dobře optimalizované weby.

1. Volba správného formátu

V roce 2026 je používání pouze JPEG a PNG signálem zastaralého řešení.

WebP a AVIF:
Moderní standardy. Umožňují kompresi o 30–50 % efektivnější než JPEG při stejné kvalitě. V iuntsevich.cz je používáme jako hlavní formáty.

SVG:
Ideální pro loga a ikonky. Vektorová grafika je extrémně lehká a perfektně ostrá na jakémkoliv displeji.

PNG:
Používejte jen tehdy, pokud potřebujete průhledné pozadí.

JPEG:
Vhodný pro fotografie, pokud nelze použít WebP.

2. Fyzická velikost (pixely)
Nemá smysl nahrávat fotografii 5000×3000 px, pokud se na webu zobrazuje v bloku 500×300.

Příklad:
Fotografie produktu má v originále 10 MB.
Po úpravě na reálné rozměry a kompresi může mít 80 KB.
Rozdíl: 125× méně.

3. Komprese (snížení velikosti)
Používejte nástroje, které odstraní přebytečná metadata a zmenší soubor bez viditelné ztráty kvality.

Doporučené nástroje:
TinyPNG, Squoosh (Google), nebo specializované pluginy pro vaše CMS.

Výsledek:
Soubor vypadá stejně, ale načte se několikanásobně rychleji.

4. SEO atributy: Alt a Title
Google obrázky „nevidí“ — čte jen text, který mu dáte.

Alt text musí popisovat obsah fotky a ideálně obsahovat klíčové slovo.

Špatně:
<img src="img1.jpg" alt="obrázek 1">
Dobře:
<img src="praha-web-design.webp" alt="Tvorba vícestránkového webu v Praze">

Přejmenujte soubor: místo DCIM_1234.jpg → montaz-klimatizace-praha.jpg

Změňte velikost: obvykle max. 1920 px pro pozadí, 800 px pro obrázky v článcích

Převeďte na WebP: standard moderních webů

Komprimujte: cílová velikost obrázku do článku — 100–150 KB

Zapněte Lazy Load: obrázky mimo první obrazovku se načtou až při scrollování

Optimalizace je povinná součást každého projektu — od malých šablonových webů až po rozsáhlé portály.

Automatizace:
Server automaticky převádí nahrané obrázky do WebP a generuje více velikostí (srcset).

Mobilní priorita:
Kontrolujeme zobrazení na Retina displejích i levných telefonech, aby poměr rychlost/ostrost byl ideální.

Čistý kód:
Žádné zbytečné skripty v galerii. Jen rychlá a moderní řešení.

Sebelepší design nepřinese výsledky, pokud uživatel zavře stránku během načítání obrázků. Můžeme provést technický audit a odstranit chyby, které brzdí výkon vašeho webu.

Získat konzultaci k optimalizaci webu