The srcset Attribute

Definition

An HTML attribute used on the <img> tag to provide the browser with a list of appropriately sized images across different device pixel densities and viewport widths.

Why It Matters

Serving desktop-sized images to mobile devices is a performance crime that kills user experience and wastes bandwidth. srcset enables resolution switching, ensuring the browser downloads the most optimal file size for the current screen.

Core Concepts

• srcset with x descriptors: logo-2x.png 2x for Retina displays.
• srcset with w descriptors: photo-320.jpg 320w provides images of different intrinsic widths.
• sizes: Works alongside w descriptors to tell the browser how wide the image renders at each breakpoint.
• Browser Choice: The browser evaluates the network and screen size to select the best file—it does not download all of them.

Connected Concepts

• The picture Element
• HTML Images
• Responsive Web Development
• Image Optimization Workflow