Practical image guide

How to Measure an Image’s Size on Screen

An image can have three different sizes: the pixel dimensions of the file, the CSS size used by the webpage, and the physical size you see on the screen. Decide which one you need before measuring, because the numbers are not interchangeable.

Published and reviewed September 6, 2026

The short answer

For a file’s pixel dimensions, check the downloaded file’s properties. For the size displayed on a webpage, use Inspect or getBoundingClientRect(). For centimeters or inches on your current screen, first calibrate, then convert the displayed CSS-pixel width using the effective PPI.

File pixels

Example: 1200 × 800 pixels

Displayed CSS size

Example: 300 × 200 CSS px

Physical size

Example: 6.9 cm wide

1. Check the image file’s pixel dimensions

If the image is saved on your computer or phone, open its file information or properties and look for dimensions. A value such as 1200 × 800 describes the stored pixel grid. It does not say how large the image will appear on a webpage or in print.

If the image is on a webpage, right-click it and open it in a new tab or save it, then inspect the actual file. Responsive pages may provide several files through srcset, so the file downloaded by your browser may not be the same one another device receives.

Do not use screenshot dimensions as the original file size

A screenshot records the rendered screen. Its pixel count can be affected by device pixel ratio, capture settings, cropping, and later resizing.

2. Measure how large the image is on the webpage

Right-click the visible image and choose Inspect.
Confirm that the selected HTML element is the image itself.
Hover over the selected element to see the browser’s size overlay.
For a precise rendered rectangle, use the short Console check below.

const box = $0.getBoundingClientRect();
({
  displayedWidth: box.width,
  displayedHeight: box.height,
  naturalWidth: $0.naturalWidth,
  naturalHeight: $0.naturalHeight,
  loadedFile: $0.currentSrc
});

In Chrome DevTools, $0 is the element currently selected in the Elements panel. The displayed width and height are the visible bounding rectangle in CSS pixels. Only run code you understand on a page you trust.

naturalWidth and naturalHeight need care: the HTML standard defines them as density-corrected natural dimensions in CSS pixels. With density descriptors, responsive sources, or metadata rotation, they are not a guaranteed report of the raw file’s stored pixel grid.

3. Estimate the image’s physical size on this screen

Once you know the displayed CSS width, you can estimate its width in inches or centimeters using the effective PPI for the current screen and browser setup.

inches = displayed CSS px ÷ effective PPI

centimeters = displayed CSS px ÷ effective PPI × 2.54

Worked example

A 1200 × 800 file is displayed at 300 × 200 CSS px. Your calibrated effective PPI is 110. The on-screen width is 300 ÷ 110 = 2.73 inches, or about 6.93 cm. The original 1200px file width does not belong in this calculation.

Use Online Ruler without pretending it is an overlay

Online Ruler does not inspect another tab and it does not place a transparent ruler over a webpage. A reliable workflow is to read the image’s CSS size first, then reproduce that number inside the ruler:

1
Read the displayed width
Use Inspect or the Console method above. Suppose the result is 300 CSS px.
2
Keep the same display setup
Open Online Ruler on the same monitor and keep browser zoom unchanged.
3
Choose Selection and Both
Draw a selection and adjust it until Width reads 300 px. Both mode also shows the estimated physical value.
4
Calibrate for physical units
If you need cm or inches, calibrate on that screen first. Pixel mode itself does not need physical calibration.

Why the displayed size can change

Cause	What changes	What to check
Responsive CSS	CSS width at different viewport sizes	Measure at the target phone or desktop width
srcset / picture	Which source file is downloaded	Read currentSrc
object-fit	How image content fits inside its element	Distinguish the element box from visible image content
transform: scale()	Visible bounding rectangle	Compare computed width with getBoundingClientRect()
Browser zoom	Physical size of CSS pixels	Return to the zoom used for calibration

Sources and limits

Browser APIs report layout concepts, not a certified physical measurement. The rendered rectangle follows CSSOM View, while an image’s natural dimensions follow the HTML standard.

For print production, manufacturing, or any job with a stated tolerance, verify the result in the target medium with an appropriate physical tool.