Kā nodrošināt, lai attēls ielādētos samazinātā izmērā mobilajās ierīcēs?

Lai ielādētu mazāka izmēra attēlus mobilajās ierīcēs, tiek izmantoti adaptīvi attēli ar HTML un CSS palīdzību:

1. Izmantojiet <img> elementu ar srcset un sizes atribūtiem, lai pārlūkprogramma izvēlētos piemērotāko attēla izmēru atkarībā no ekrāna lieluma:

<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="Attēla apraksts">

2. Izmantojiet CSS, lai ierobežotu maksimālo attēla platumu:

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

3. Var arī izmantot modernus attēla formātus (WebP, AVIF), lai samazinātu faila lielumu.

Tādējādi pārlūkprogramma mobilajā ierīcē ielādēs optimālo izmēru failu, kas uzlabos veiktspēju un samazinās datu plūsmu.