Image pixels vs CSS pixels

Start with the file you actually have

A raster image has a fixed grid: for example, 1,600 columns by 900 rows. Those dimensions describe its stored image, regardless of whether you view it on a phone, a laptop or a large monitor. A ruler operating on that grid measures image pixels.

A browser can display the same image in a much smaller box. If a 1,600-pixel-wide image is displayed at 800 CSS pixels wide, each CSS pixel spans two image pixels horizontally. That ratio comes from those particular dimensions. It does not mean every image on that page, or every screenshot from that computer, follows the same relationship.

A worked example of image scaling

Suppose a source image is 1,200 pixels wide and you display it in a 600 CSS pixel box without cropping or distortion. A feature that spans 100 source pixels takes up 50 CSS pixels in that displayed image. Divide the feature span by the ratio between source width and displayed width: 100 divided by 2 equals 50.

If the displayed width changes to 400 CSS pixels, the same feature occupies roughly 33.33 CSS pixels. Its original image measurement remains 100 pixels. This is why the pixel measurement tool reports original image coordinates at every zoom level: the preview size should not redefine the asset being measured.

Screenshots add another scale to the problem

A screenshot records a raster representation of a screen or page. The relationship between that representation and layout dimensions depends on the capture method, browser zoom and display scaling. The screenshot may also have been resized by an editor, a messaging service or the person who shared it.

Avoid assuming that a screenshot is exactly twice the CSS layout size just because it came from a high-density display. Begin with evidence: the original capture settings, a known viewport width, or an element whose dimensions you can verify in the page. A ruler cannot reconstruct missing capture information from the image alone.

Use a known reference carefully

If an element known to be 200 CSS pixels wide spans 400 pixels in the screenshot, the observed horizontal scale is two image pixels per CSS pixel at that location. Another horizontal span of 64 screenshot pixels would correspond to 32 CSS pixels if the same scale applies.

Check a second reference before treating that as the scale for the whole image. Cropping changes the origin but normally preserves distances; resizing changes distances. Nonuniform resizing can change the horizontal and vertical ratios independently. Perspective in a photograph of a monitor is another problem entirely, so a direct screenshot is a better reference for layout measurements.

Pixel dimensions do not determine print size

Image pixels also differ from inches or centimetres. A 1,200-pixel span printed at 300 pixels per inch occupies 4 inches. Printed at 150 pixels per inch, it occupies 8 inches. The pixel count stayed the same; the chosen print scale changed.

Do not use a screenshot's apparent size on your monitor as a physical ruler. To make a print calculation, specify the intended pixels-per-inch value and divide the measured pixel length by it. The ruler starts in pixels. Its Set scale control can use a reference length you supply, but it cannot choose a physical scale for you. Keep the reference unit and print-resolution calculation explicit when preparing a handoff.

Record the units in a design handoff

A useful note includes the source file, its full dimensions, the measured span and the unit. If you converted that measurement to CSS pixels, record the scale and how you established it. This allows the next person to reproduce the calculation instead of guessing which kind of pixel you meant.

For exact boundary selection, follow the image measurement guide. When comparing raster and vector assets, the SVG versus PNG guide explains why a raster grid has a fixed size while vector artwork needs an output size before it can be measured in image pixels.

Frequently asked questions