Optimalizácia obrázkov pre rýchlosť webu: kompletný sprievodca

Obrázky tvoria približne 50 % váhy stránky. Ich optimalizácia je najrýchlejšou cestou k zlepšeniu výkonu.

---

Prečo optimalizovať?

• 53 % mobilných používateľov odíde, ak sa stránka načítava dlhšie ako 3 sekundy (údaje Google)
• Oneskorenie o 1 sekundu = o 7 % menej konverzií
• Core Web Vitals (LCP, CLS) priamo ovplyvňujú pozície vo výsledkoch vyhľadávania Google

---

Krok 1: správny formát

• WebP — najlepšia voľba pre všetky webové obrázky (25–35 % menšie ako JPEG)
• PNG — snímky obrazovky, priehľadnosť, logá
• JPEG — fotografie bez podpory WebP
• SVG — ikony, logá
• AVIF — formát novej generácie, používajte s náhradným formátom

---

Krok 2: kompresia

TinyImg — zadarmo, súkromne, okamžite.

---

Krok 3: responzívne obrázky

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Popis" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Popis" width="800" height="600" />
</picture>

---

Krok 4: lenivé načítavanie

<img src="image.webp" loading="lazy" alt="Popis" width="800" height="600" />

Nikdy nepoužívajte lenivé načítavanie pri obrázkoch nad prekladom stránky. Vždy uvádzajte šírku a výšku — zabraňuje to posunom rozloženia (CLS).

---

Krok 5: zadajte rozmery

<img src="photo.webp" alt="Fotografia" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Krok 6: používajte CDN

Cloudflare (zadarmo), Cloudinary, imgix, Vercel.

---

Krok 7: merajte výsledky

• LCP: pod 2,5 s
• CLS: pod 0,1
• Celková váha obrázkov: pod 500 KB

Nástroje: PageSpeed Insights, Lighthouse, WebPageTest.

---

Kontrolný zoznam

• Formát WebP
• Kompresia cez TinyImg
• srcset + sizes
• Lazy load pre obrázky pod prekladom
• Atribúty width a height
• CDN
• Audit PageSpeed

Začnite s TinyImg.