Jak zajistit, aby se obrázek načítával v zmenšené velikosti na mobilních zařízeních?

Pro načítání obrázků v menším formátu na mobilních zařízeních se používají adaptivní obrázky pomocí HTML a CSS:

1. Použijte prvek <img> s atributy srcset a sizes, aby prohlížeč vybíral vhodnou velikost obrázku podle velikosti obrazovky:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Popis obrázku">

2. Použijte CSS k omezení maximální šířky obrázku:

img {
  max-width: 100%;
  height: auto;
}

3. Moderní formáty obrázků (WebP, AVIF) lze také použít ke zmenšení velikosti souborů.

Tímto způsobem načte prohlížeč na mobilním zařízení optimální velikost souboru, což zlepší výkon a sníží datový tok.