Cum faci ca imaginea să se încarce în dimensiune redusă pe dispozitivele mobile?

Pentru a încărca imagini în dimensiuni reduse pe dispozitivele mobile, se utilizează imagini adaptative cu ajutorul HTML și CSS:

1. Utilizați elementul <img> cu atributele srcset și sizes, pentru ca browserul să aleagă dimensiunea potrivită a imaginii în funcție de dimensiunea ecranului:

<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="Descrierea imaginii">

2. Folosiți CSS pentru a limita lățimea maximă a imaginii:

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

3. De asemenea, se pot folosi formate moderne de imagini (WebP, AVIF) pentru a reduce dimensiunea fișierelor.

Astfel, browserul pe dispozitivul mobil va descărca fișierul de dimensiune optimă, ceea ce va îmbunătăți performanța și va reduce traficul.