Imaginile responsive lasă browserul să aleagă cea mai bună imagine pentru dispozitiv — economisind lățimea de bandă pe telefoane și servind imagini ascuțite pe ecranele cu DPI ridicat.
srcset + sizes — aceeași imagine, rezoluții diferite
html
Imaginile responsive lasă browserul să aleagă cea mai bună imagine pentru dispozitiv — economisind lățimea de bandă pe telefoane și servind imagini ascuțite pe ecranele cu DPI ridicat.
srcset listează imaginile candidate cu lățimile lor intrinseci (400w = 400px lățime).sizes spune browserului cât de lată va fi imaginea afișată la diferite puncte de întrerupere (aici: lățimea completă a viewportului sub 600px, altfel jumătate).sizes + densitatea de pixeli a dispozitivului pentru a alege cea mai mică imagine care încă arată ascuțit — înainte de a descărca orice.Un telefon ar putea alege small.jpg; un laptop Retina care o afișează la 50% lățime ar putea alege large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Browserul folosește prima <source> pe care o suportă/se potrivește. Utilizați <picture> atunci când aveți nevoie de formate diferite (serviți AVIF/WebP cu fallback JPEG) sau de o decupare diferită pentru fiecare dimensiune de ecran (direcție artistică) — lucruri pe care srcset singur nu le poate face.
srcset + sizes.<picture>.Servirea imaginilor cu dimensiunea corectă și în format modern este una dintre cele mai mari câștiguri de performanță pentru web — reduce dramatic utilizarea datelor mobile și îmbunătățește Largest Contentful Paint.
Aceste instrumente native permit browserului să facă alegerea optimală automat, cu fallback-uri elegante pentru browserele mai vechi.