Responsive Images

Deliver the appropriately sized image using srcset and sizes attributes in the img element.

srcset and sizes

<img src="images/gnp.jpg"
alt="Glacier National Park"
srcset="images/gnp-600.jpg 600w,
images/gnp-900.jpg 900w,
images/gnp-1200.jpg 1200w,
images/gnp-1500.jpg 1500w"
sizes="(min-width: 1500px) 1400px,
       (min-width: 1200px) 1100px,
       (min-width: 900px) 800px,
       (min-width: 600px) 500px,
       900px"/>

Demos