Responsive <img> via "srcset"
Specificarea mai multor surse posibile pentru imagine și încărcarea celei mai potrivite pentru ecranul dispozitivului.
Deschide devtools în modul responsive și joacă-te cu dimensiunea browserului pentru a vedea cum surse diferite sunt încărcate în funcție de rezoluție.
<img
srcset="
https://d3tycb976jpudc.cloudfront.net/demo-assets/red_bycicle__high.jpg 4000w,
https://d3tycb976jpudc.cloudfront.net/demo-assets/red_bycicle__med.jpg 2000w,
https://d3tycb976jpudc.cloudfront.net/demo-assets/red_bycicle__low.jpg 800w
"
sizes="(max-width: 800px) 700px, 1000px"
style="maxWidth: 100%"
src="https://d3tycb976jpudc.cloudfront.net/demo-assets/red_bycicle__med.jpg"
alt="Red bycicle wheel"
/>