Jak optimalizovat načítání obrázků na webové stránce?

1. Komprese: Použijte nástroje k optimalizaci velikosti obrázků bez ztráty kvality (například TinyPNG, Compressor.io).
2. Formáty: Vyberte moderní formáty jako WebP nebo AVIF, které nabízejí lepší kompresi ve srovnání s JPEG a PNG. Pro starší prohlížeče použijte <picture> nebo atribut srcset jako fallback.
3. Lazy Loading: Odložte načítání obrázků mimo viditelnou oblast, dokud nebudou potřeba. Použijte nativní loading="lazy" nebo JavaScriptové knihovny.
4. Responzivní obrázky: Poskytněte různé verze obrázků pro různé velikosti obrazovky a rozlišení pomocí <picture> nebo atributů srcset/sizes.
5. CDN (Content Delivery Network): Umístěte obrázky na CDN pro rychlejší doručení obsahu uživatelům z nejbližšího umístění.
6. Caching: Nakonfigurujte správné hlavičky cache na serveru, aby prohlížeč mohl ukládat obrázky a načítat je z lokální cache při opakovaných návštěvách.
7. Placeholder/Blurhash: Zobrazte nízkokvalitní "placeholder" nebo generovaný Blurhash, zatímco se načítá plnohodnotný obrázek.

Příklad použití loading="lazy":

<img src="image.jpg" alt="Popis obrázku" loading="lazy">

Příklad použití <picture> pro různé formáty:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Popis obrázku">
</picture>