What Is the srcset Attribute?
The srcset attribute is an HTML img attribute that provides the browser with multiple image source options at different sizes. Instead of serving one fixed-size image to all devices, srcset lets the browser choose the most appropriate image based on the device's screen size, pixel density, and connection speed. A desktop user gets a 1200px image; a mobile user gets a 480px image — both see the same visual result, but the mobile user downloads 70% less data, dramatically improving load times.
srcset vs. CSS background-size
srcset works in HTML markup and is the correct approach for content images (product photos, article images, hero banners). CSS background-image with media queries handles decorative background images. The picture element with source tags adds art direction — showing a different crop of an image on mobile vs desktop. The srcset generator produces both the simple img srcset implementation and the more advanced picture element with WebP source fallback, covering the full range of responsive image scenarios.
How to Use the Srcset Generator
Enter your base image URL and alt text. Check the breakpoints you want to target — 320w through 1920w. Select your URL naming convention: suffix style (image-320w.jpg) for locally hosted images, query string style for dynamic resizing APIs, subfolder style for CDN-organized images, or CDN parameter style for services like Cloudinary or ImageKit. Enter your sizes attribute — this tells the browser how wide the image will be at each breakpoint before it selects from srcset. Click Generate to get both img srcset and picture/source WebP code.
The sizes Attribute Explained
The sizes attribute is srcset's partner — it tells the browser the display width of the image at different viewport sizes, before layout has been calculated. Format: (media-condition) size, (media-condition) size, default-size. Example: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px" means: on mobile (≤768px), the image is 100% of viewport width; on tablet (≤1200px), 50% of viewport width; otherwise, 800px fixed. Accurate sizes attributes ensure the browser selects the optimal image from srcset, maximizing performance benefits.
WebP and Modern Image Formats
The picture element with source type="image/webp" is the recommended implementation for serving WebP to supported browsers while falling back to JPEG/PNG for others. WebP images are 25-35% smaller than equivalent JPEG at the same quality level, producing significant bandwidth savings. Combine WebP with srcset for maximum performance: WebP source with srcset for modern browsers, JPEG/PNG img fallback with srcset for legacy browsers. This combination delivers the smallest possible image files across all devices and browsers.