Serving Responsive Images with srcset and sizes

Responsive images are not just about scaling. Using srcset and sizes, you can serve the optimally-sized image for each device: small on mobile, large on desktop. File size and performance improve dramatically.

The Problem Without Srcset

A desktop-sized image (2000×1333) served on mobile wastes bandwidth and slows load. Responsive images solve this by serving mobile-optimized images to mobile devices.

Srcset Attribute

Srcset lists multiple image sources at different resolutions. Syntax: <img srcset="small.jpg 600w, large.jpg 1200w">. The browser picks the best match for the device.

Sizes Attribute

Sizes tells the browser the display width at each breakpoint. Syntax: <img sizes="(max-width: 600px) 100vw, 50vw">. On small screens, the image fills the viewport. On large screens, it takes 50%.

Picture Element

For art direction and format fallbacks, use the picture element: different images for different breakpoints, different formats (WebP vs JPEG).

Real-World Example

<picture><source srcset="photo.webp" type="image/webp"><img src="photo.jpg"></picture> serves WebP to modern browsers and JPEG to older ones.

Performance Impact

Responsive images reduce mobile image size by 50–70%, dramatically improving load times on mobile devices.

Create Responsive Images

Convert and resize your images with QuickConvert to create srcset sets at multiple resolutions.