Responsive Image Dimension Calculator
Describe how wide an image is at each breakpoint of your layout and which screen densities you support, and this calculator lists the pixel widths to export. It also writes the srcset and sizes attributes and the img and picture markup that use them, all inside this browser tab.
Screen width in CSS px, a colon, then how wide the image is from there up: 600px, 50vw or 50vw - 24px.
Device pixel ratios to cover, each from 1 to 4, separated by commas.
Limits: Up to 8 lines and 4 KB of layout text. Larger input is refused with a message.
Results
- Widths to export
- - px
- Files per format
- -
- Fallback src width
- - px
| Screen width | Image width, CSS px | Pixel ratio | Export width, px |
|---|
sizes
srcset
img markup
picture markup
How to use the Responsive Image Dimension Calculator
- In the layout box, write one line per breakpoint: the screen width where it starts, a colon, and the image width from there up.
- List the pixel ratios to cover, such as 1, 2 for standard and high density screens.
- Set the rounding step, file name pattern, aspect ratio and alt text in the settings.
- Copy the widths into your export plan and the markup into your page.
Worked example
A blog photo that fills a phone screen inside 16 px margins, takes half the width less a gutter on tablets, and sits in a 600 px column from 1200 px up, rounded to steps of 50 px. Press Load the example to fill in this layout and the settings listed under it.
0: 100vw - 32px 768: 50vw - 24px 1200: 600px
- Pixel ratios
- 1, 2
- Round widths up to a multiple of
- 50
- Widest screen to plan for
- 1920
- File name pattern
- images/photo-{w}.jpg
- Aspect ratio
- 3:2
- Formats for picture
- avif, webp
- Alt text
- A cyclist on a coastal road at sunset
- Widths to export
- 600, 750, 1200, 1500
- Files per format
- 4
- Fallback src width
- 750
- sizes
(min-width: 1200px) 600px, (min-width: 768px) calc(50vw - 24px), calc(100vw - 32px)- srcset
images/photo-600.jpg 600w, images/photo-750.jpg 750w, images/photo-1200.jpg 1200w, images/photo-1500.jpg 1500w
How to read the results
- Widths to export
- Every distinct pixel width your files need, smallest first. Export each one in every format you serve, named by the pattern, so the srcset entries point at files that exist.
- Files per format
- How many widths that is. With AVIF and WebP sources next to a JPEG, multiply it by three for the total number of files.
- Fallback src width
- The file named in src: the smallest width that covers the widest slot at one image pixel per CSS pixel.
- Widths by breakpoint and pixel ratio
- One row per range and ratio. The image width is the widest the image gets in that range, taken at the next breakpoint, at the widest screen setting for a fluid last line, or the fixed value. The export width is that figure times the ratio, rounded up. Two rows with the same export width share one file.
- sizes and srcset
- The two attributes on their own, for an img or source you already have in a template.
- img and picture markup
- Complete elements to paste. The picture version repeats the same widths and sizes on one source per extra format and ends with the same img.
How this tool works and its limitations
Each layout line starts a range of screen widths that runs to the next line, and the narrowest line also covers every screen below it, because the last sizes entry has no condition. A fixed width is the same across its range; a vw width is worked out at the top of the range, so no screen inside it needs a wider file. That width is multiplied by each pixel ratio and rounded up to a whole pixel, since the HTML standard wants a width descriptor to be a whole number above zero that matches the file. With a step above 1 it is then rounded up to the next multiple of the step. Equal widths merge, because no two candidates may share a descriptor, and the list is sorted.
No suggested file is wider than 6,000 pixels: a larger result is lowered to 6,000 and the page says so. That cap is a safety limit of this tool, not a rule of the standard. The layout accepts up to 8 lines with screen widths from 0 to 7,680 px, and up to 5 ratios from 1 to 4; any other input gets a message naming the line or setting. Make the files with the Image Resizer, one width at a time, and the WebP copies with JPG to WebP; this site has no AVIF encoder. For a rough idea of what each width will weigh, enter it in the Image File Size Calculator. Nothing you type is uploaded or stored, and the limits below still apply:
- The browser makes the final pick: the HTML standard leaves the choice among srcset candidates to it, and MDN notes it may weigh user preferences or bandwidth, so a visitor can get a smaller or larger file than the table suggests.
- The tool suggests widths and writes markup only. It does not resize, convert or compress a file, and each file must really be the width its descriptor states.
- Each range is measured at its widest, so a fluid image on a screen near the bottom of a range is sent more pixels than it strictly needs.
- Breakpoints are written as min-width conditions only. A different crop per breakpoint, known as art direction, needs media attributes on each source, which this tool does not write.
- The widths are only as right as the layout you type: if your CSS draws the image wider or narrower than sizes says, the browser still chooses from the sizes value.
- File weight is not estimated here, since it depends on the picture and the encoder.
- The layout box takes up to 4 KB of text in at most 8 lines, and more is refused with a message.
Features
- Widths rounded up to whole pixels, or to a step such as 50 px, with repeats merged.
- A sizes value ordered the way browsers read it, widest breakpoint first.
- Plain img markup and picture markup with AVIF and WebP sources in the order you choose.
- Width and height attributes from your aspect ratio, so the browser can hold the space.
Why one layout slot needs several files
A CSS pixel is a unit of layout, not a dot on the glass. MDN defines devicePixelRatio as physical pixels per CSS pixel, expects 2 on HiDPI screens and notes that many phones report more. A photo drawn 343 CSS pixels wide therefore needs 1,029 image pixels on a phone at ratio 3 but only 343 on a laptop at ratio 1. So the calculator multiplies the widest each slot gets by every ratio you list. For example widths with a source for each, the website image guide has a table of image widths for common layout slots.
How a browser reads srcset and sizes
With width descriptors, srcset says how many pixels each file has and sizes says how wide the image will be shown. The HTML standard walks the sizes list in order and takes the first entry whose media condition is true, and the last entry carries no condition, which is why the widest breakpoint comes first here. MDN's img reference adds that percentages are not allowed in sizes, vw and math functions such as calc() are, and a missing sizes counts as 100vw.
When picture is worth the extra markup
For sharper images on dense screens, img with srcset is enough, and MDN's picture reference recommends exactly that for resolution switching. Picture helps when you offer AVIF or WebP next to a JPEG. Each source names its MIME type, and the standard's source selection steps skip any type the browser cannot show and use the first source left, so put your preferred format first. The img inside stays required: it holds the alt text, the dimensions and the fallback file.
Frequently asked questions
Why does it use w descriptors instead of 1x and 2x?
Density descriptors suit an image that keeps one CSS width on every screen. Once the width changes between breakpoints, width descriptors plus sizes let the browser work out the density for itself. The two kinds cannot be mixed in one srcset.
Does this tool resize my images?
No. It only does the arithmetic and writes the markup; no image file is opened. Make each width with the Image Resizer and save it under the name your pattern gives, for example photo-750.jpg.
How do I find the width my image takes at each breakpoint?
Read it from your stylesheet or design file, or resize the browser window to each breakpoint and measure the image with the developer tools. A full width image inside 16 px of padding on both sides is 100vw - 32px.
Which pixel ratios should I list?
1 and 2 cover standard and high density screens. Add 3 if crisp phone photos matter more to you than file weight. Every extra ratio can add files, and a larger rounding step merges the ones that land close together.
Why is the fallback src not the largest file?
When srcset uses width descriptors, a browser that understands it ignores src, so the fallback serves only very old browsers. The smallest file at least as wide as the widest slot looks right on their standard screens without the biggest download.
Will this make my page faster or rank higher?
The tool cannot promise either. It sizes files to the layout you describe, and the effect depends on the files you export and the file the browser picks. Measure the page before and after the change.
Last updated .