Ako zabezpečiť, aby sa obrázok načítaval v zmenšenej veľkosti na mobilných zariadeniach?

Na načítanie obrázkov v zmenšenej veľkosti na mobilných zariadeniach sa používajú adaptívne obrázky pomocou HTML a CSS:

1. Použite prvok <img> s atribútmi srcset a sizes, aby prehliadač vybral vhodnú veľkosť obrázka v závislosti od veľkosti 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ázka">

2. Použite CSS na obmedzenie maximálnej šírky obrázka:

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

3. Moderné formáty obrázkov (WebP, AVIF) možno tiež použiť na zníženie veľkosti súborov.

Týmto spôsobom načíta prehliadač na mobilnom zariadení optimálnu veľkosť súboru, čo zlepší výkon a zníži dátový tok.