Responsive Image Calculator
Turn a CSS image slot and DPR into practical export sizes, srcset, sizes and CSS image-set snippets.
Generate crisp image sizes for DPR 1
Convert a CSS image slot into physical export sizes, srcset, sizes and CSS image-set snippets.
| Scale | Pixels |
|---|---|
| 1x | 320 x 180 |
| 2x | 640 x 360 |
| 3x | 960 x 540 |
| DPR 1 | 320 x 180 |
1x covers DPR 1 without excessive overfetch for this slot.
<img
src="image-320x180.jpg"
srcset="image-320x180.jpg 1x, image-640x360.jpg 2x, image-960x540.jpg 3x"
sizes="(max-width: 320px) 100vw, 320px"
width="320"
height="180"
alt=""
/>sizes="(max-width: 320px) 100vw, 320px".asset {
background-image: image-set(
url("image-320x180.jpg") 1x,
url("image-640x360.jpg") 2x,
url("image-960x540.jpg") 3x
);
}@media (max-resolution: 1.99dppx) {
.asset {
background-image: image-set(
url("image-320x180.jpg") 1x,
url("image-640x360.jpg") 2x,
url("image-960x540.jpg") 3x
);
}
}Why CSS size and DPR both matter
Layouts are sized in CSS pixels, but high-density screens draw multiple physical pixels for each CSS pixel. The right source image depends on both values. A card image that displays at 320 CSS pixels needs a larger source on DPR 2 or DPR 3 screens, but exporting every image at the largest possible size wastes bandwidth.
Use the calculator to generate density candidates, then pair the result with the live DPR checker and viewport checker when debugging real pages.
Frequently asked questions
› How do I calculate the right image size for DPR?
Multiply the CSS display width and height by the device pixel ratio. A 320px wide image slot on a DPR 2 display needs about 640 physical pixels to look crisp.
› Should I always export 3x or 4x images?
No. Higher-density assets can waste bandwidth when the slot is small or most visitors use lower DPR screens. Provide practical 1x, 2x and 3x candidates, then let srcset choose.
› What is the difference between srcset and sizes?
srcset lists available image files. sizes tells the browser how large the image will render in CSS pixels, so it can choose the best candidate.
› When should I use CSS image-set()?
Use image-set() for CSS background images that need density-aware sources. Use img srcset for content images.