Optimalizace obrázků pro rychlost webu: kompletní průvodce

Obrázky tvoří přibližně 50 % váhy stránky. Jejich optimalizace je nejrychlejší cestou ke zlepšení výkonu.

---

Proč optimalizovat?

• 53 % mobilních uživatelů odejde, pokud se stránka načítá déle než 3 sekundy (data Google)
• Zpoždění o 1 sekundu = o 7 % méně konverzí
• Core Web Vitals (LCP, CLS) přímo ovlivňují pozice ve výsledcích vyhledávání Google

---

Krok 1: správný formát

• WebP — nejlepší volba pro všechny webové obrázky (25–35 % menší než JPEG)
• PNG — snímky obrazovky, průhlednost, loga
• JPEG — fotografie bez podpory WebP
• SVG — ikony, loga
• AVIF — formát nové generace, používejte s náhradním formátem

---

Krok 2: komprese

TinyImg — zdarma, soukromě, okamžitě.

---

Krok 3: responzivní 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: líné načítání

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

Nikdy nepoužívejte líné načítání u obrázků nad přelohem stránky. Vždy uvádějte šířku a výšku — zabraňuje to posunům layoutu (CLS).

---

Krok 5: zadejte rozměry

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

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

---

Krok 6: používejte CDN

Cloudflare (zdarma), Cloudinary, imgix, Vercel.

---

Krok 7: měřte výsledky

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

Nástroje: PageSpeed Insights, Lighthouse, WebPageTest.

---

Kontrolní seznam

• Formát WebP
• Komprese přes TinyImg
• srcset + sizes
• Lazy load pro obrázky pod přelohem
• Atributy width a height
• CDN
• Audit PageSpeed

Začněte s TinyImg.