Responsive Image Loading: `srcset` and `<picture>`

Serving a massive 2400px desktop banner to a mobile user on a 4G connection wastes battery, consumes cellular bandwidth, and triggers page bounce:

srcset and sizes

Allows the browser to automatically select the optimal file resolution based on screen width and device DPR:

<img src="hero-800.webp"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Analytics platform dashboard">

The <picture> Element

Used for true art direction, serving entirely different crops (e.g., vertical portrait on mobile, panoramic widescreen on desktop).