Srcset Size Picker Calculator
Pick the responsive image widths to export for a given layout size and device pixel ratios — build a ready srcset attribute.
How it works
export width = displayed CSS width × device pixel ratio (one file per target DPR)
A device pixel ratio (DPR) of 2 means the screen packs 2 physical pixels into every CSS pixel, so an image occupying 400 CSS px needs an 800px source to look sharp. srcset lists each candidate file with its intrinsic width in "w" units, and the browser — helped by your sizes attribute — picks the smallest file that still covers the visitor’s DPR and layout width. Exporting a 1×, 2× and 3× set covers virtually every device without shipping an oversized image to low-density screens.
Worked example
An image displayed at 400px, targeting up to 3× density: 400×1 = 400w, 400×2 = 800w, 400×3 = 1200w. srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" with sizes="400px" lets the browser choose.
Sources: MDN — Responsive images
Frequently asked questions
What does the sizes attribute do?
sizes tells the browser how wide the image will be *rendered* (often via media queries), so it can multiply by the DPR and choose the right srcset entry before layout is known. Without it, browsers assume 100vw and may over-download.
Do I really need a 3× version?
Many phones report 3× DPR, but the visual gain above 2× is small and the file is much larger. A common compromise is to cap at 2× for large hero images and only go to 3× for small, detail-critical graphics.
w descriptors or x descriptors?
Use w descriptors with sizes when the image width changes across breakpoints — the most flexible setup. x descriptors (1x, 2x) are simpler but only suit a fixed-size image that never changes its CSS width.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.