Image Size vs Display Size: Why Your Screenshot Looks Different Online

An image can be 2400 pixels wide and still display as 1200 pixels on a web page. A screenshot can look sharp on your laptop and blurry after it is pasted into a document. A product photo can have a huge file size but still appear small in a listing.

The confusion usually comes from mixing up image size and display size.

Image Size Means the File's Pixels

Image size usually means the bitmap dimensions stored in the file, such as:

2400 x 1600 px

That number affects:

• How much detail the image can contain
• File size
• Cropping options
• Whether the image has enough resolution for print or zooming
• How large it may appear if shown at natural size

This is the number most image dimension tools measure when you open the original file.

Display Size Means How Large It Appears

Display size is how large the image is shown in a layout. On the web, that is usually controlled by CSS, the container width, responsive image rules, or browser zoom.

For example:

<img src="photo.jpg" width="600" />

The file might be 2400 pixels wide, but the browser can display it at 600 CSS pixels wide.

naturalWidth, CSS Pixels, and Retina Screens

The browser exposes image dimensions through properties such as naturalWidth. MDN describes HTMLImageElement.naturalWidth as the intrinsic, density-corrected width of an image in CSS pixels.

Separately, window.devicePixelRatio describes the relationship between physical pixels and CSS pixels on the current display. On high-density screens, one CSS pixel can map to more than one physical pixel.

That is why a Retina screenshot may feel confusing:

• The screenshot file may contain more image pixels.
• The page may display it at fewer CSS pixels.
• A design review may care about CSS pixels.
• An image annotation may care about the file's actual pixels.

Why Product Images Look Blurry After Upload

Blurry product images often come from one of these issues:

• The uploaded file is too small for the display slot.
• The platform compresses the image after upload.
• The image is stretched beyond its original pixel dimensions.
• A screenshot was captured at one density and displayed at another.
• Text or measurement labels were added before resizing, then scaled down.

If you need to add product dimensions, annotate the image near the final display size when possible. If the platform resizes images, export a clean version and test it in the actual listing.

How to Explain the Size in a Bug Report

Use precise wording:

• "The original image is 2400 x 1600 px."
• "The page displays it at 600 x 400 CSS px."
• "The screenshot was captured on a 2x display."
• "The annotated label becomes blurry after the platform resizes the image."

This removes the guesswork for designers, developers, and support teams.

Quick Answer

Image size is the pixel dimensions stored in the image file. Display size is how large the browser, app, or document shows it. They can be different because of CSS, responsive layouts, browser zoom, and high-density screens. When measuring or annotating images, say whether you mean file pixels or CSS display pixels.

What to Double-Check

| Check | Why it matters | |---|---| | Natural pixels | The underlying image can be larger than the displayed size. | | Browser zoom | Zoom changes what you see, even if the source pixels are unchanged. | | Reference points | Measuring shadows or rounded corners can create inconsistent results. | | Device scale | Retina screenshots and CSS pixels can differ by a 2x or 3x scale. |

FAQ

Why do two tools show different measurements?

They may be measuring different coordinate systems: source pixels, CSS pixels, device pixels, or a scaled preview. Confirm the coordinate system before comparing numbers. In practice, pair this step with the output from Annotate Image Dimensions.

Image checks that matter

Understand image pixels, CSS display size, naturalWidth, Retina screenshots, and why an image can be 2400px wide but appear as 1200px on a page. Image decisions should start with the final use: article hero, thumbnail, profile photo, product listing, screenshot, or archive copy. Each one has a different tolerance for compression, cropping, transparency, and text sharpness.

Use Annotate Image Dimensions on a copy of the original, then compare the export at the size people will actually see. For screenshots, inspect text edges; for photos, check skin tone and shadow detail; for transparent graphics, place the result on light and dark backgrounds.