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"
/>