Hogyan lehet elérni, hogy a kép kisméretben töltődjön be mobil eszközökön?

Mobil eszközökön a képek kicsinyített méretben történő betöltéséhez adaptív képeket használunk HTML és CSS segítségével:

1. Használja az <img> elemet a srcset és sizes attribútumokkal, hogy a böngésző a képernyő méretének megfelelően válassza ki a megfelelő kép méretét:

<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="Kép leírása">

2. Használjon CSS-t a kép maximális szélességének korlátozására:

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

3. Modern képformátumokat (WebP, AVIF) is alkalmazhat a fájlméret csökkentése érdekében.

Így a mobil eszköz böngészője az optimális méretű fájlt tölti le, ami javítja a teljesítményt és csökkenti a forgalmat.