Responsive Image Calculator

Turn a CSS image slot and DPR into practical export sizes, srcset, sizes and CSS image-set snippets.

DPR-aware srcset + sizes CSS image-set

Responsive image calculator

Generate crisp image sizes for DPR 1

Convert a CSS image slot into physical export sizes, srcset, sizes, image-set and canvas snippets.

CSS widthCSS heightDPR

Recommended

320 × 180

Scale	Pixels
1x	320 × 180
2x	640 × 360
3x	960 × 540
DPR 1	320 × 180

Crisp match

1x covers DPR 1 without excessive overfetch for this slot.

Image

Use for img tags, product media and content images.

HTML

<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=""
/>

srcset

srcset="image-320x180.jpg 1x, image-640x360.jpg 2x, image-960x540.jpg 3x"

sizes

sizes="(max-width: 320px) 100vw, 320px"

Insight

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.

Check DPR Check viewport

Responsive image checks

Choosing srcset candidates

For fixed image slots, start with 1x, 2x and 3x candidates rather than uploading only the largest file. The browser uses srcset and sizes together to choose the smallest source that still looks sharp.

DPR does not change layout width

A 320 CSS-pixel slot remains 320 CSS pixels on DPR 1, 2 or 3 screens. DPR only changes how many physical source pixels are needed for a crisp result.

Check DPR

Background images use image-set()

Use image-set() for CSS background art and decorative media. Use regular img srcset for meaningful content images so alt text, loading and intrinsic dimensions stay available.

Canvas needs a larger backing store

Canvas and WebGL surfaces have a CSS display size and an internal pixel buffer. Set the CSS size for layout, scale the backing store by DPR, then draw after scaling the context.

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.