Intrinsic vs Rendered Image Size

Every image on a webpage has two sets of dimensions: the real pixel size of the file (intrinsic, also called natural) and the size it is actually drawn at on screen (rendered). If you landed here from Chrome DevTools, those are the two numbers in the tooltip — and the gap between them is usually wasted bandwidth.

Definitions

The JavaScript Properties, Compared

There are more ways to ask an image how big it is than most people expect, and they don't all answer the same question. This is the reference worth bookmarking:

The pairing that answers "am I shipping too many pixels?" is naturalWidth versus getBoundingClientRect().width. The first is what you downloaded; the second is what the user actually sees.

Why naturalWidth Is 0 (the timing gotcha)

This trips up nearly everyone once. naturalWidth is only populated after the browser has read enough of the file to know its dimensions. Read it immediately after setting src and you get 0:

const img = new Image();
img.src = '/photo.jpg';
console.log(img.naturalWidth); // 0 — not loaded yet

// Correct: wait for load
img.onload = () => console.log(img.naturalWidth); // 3000

// Or with promises
await img.decode();
console.log(img.naturalWidth); // 3000

// Already in the DOM? Guard on .complete
if (img.complete && img.naturalWidth > 0) { /* safe to read */ }

Note the naturalWidth > 0 check alongside complete: complete is also true when the image failed to load, so checking it alone will happily hand you a broken image's zeroes.

How to Get Image Dimensions From a URL

If all you have is a URL and you want its dimensions, you don't need to insert anything into the page — construct an Image in memory and let it load:

function getImageDimensions(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
    img.onerror = () => reject(new Error('Could not load ' + url));
    img.src = url;
  });
}

const { width, height } = await getImageDimensions('https://example.com/photo.jpg');

This works for cross-origin images: reading dimensions is only reading metadata, so no CORS headers are needed. You would only hit CORS restrictions if you tried to read the image's pixels — for example by drawing it to a canvas. If you just want the answer without writing code, paste the URL into our image dimension finder.

Why They Differ

Several factors cause natural and rendered dimensions to diverge:

• CSS sizing: Rules like max-width: 100%, width: 50vw, or container constraints scale images down (or up).
• HTML attributes: Explicit width and height attributes override natural size.
• Responsive layouts: Flexbox and grid containers resize images to fit available space.
• Device pixel ratio: On retina (2x) displays, a 200px CSS pixel container actually uses 400 device pixels.
• object-fit: Properties like object-fit: cover crop the image, changing effective dimensions.

Why It Matters

How to Check

You can check both dimension sets several ways:

• Browser DevTools: Hover over an image element to see both intrinsic and rendered sizes in the tooltip.
• JavaScript console:

document.querySelectorAll('img').forEach(img => {
  console.log(img.src);
  console.log(`  Natural:  ${img.naturalWidth}×${img.naturalHeight}`);
  const rect = img.getBoundingClientRect();
  console.log(`  Rendered: ${Math.round(rect.width)}×${Math.round(rect.height)}`);
});

Or use our Image Dimension Finder to scan an entire page and see both dimensions for every image at once.

Working Out the Right Size

The target natural width is the rendered CSS width multiplied by the device pixel ratio — that is the number of real device pixels the slot has to fill:

const rect = img.getBoundingClientRect();
const target = Math.round(rect.width * window.devicePixelRatio);

console.log('rendered:', Math.round(rect.width), 'css px');
console.log('target natural width:', target, 'px');
console.log('actual natural width:', img.naturalWidth, 'px');
console.log('wasted pixels:', img.naturalWidth - target);

A practical rule: aim for a natural width within about 1–2× the rendered width. Well below that and the image looks soft; far above it and you are paying for pixels nobody will ever see. Because file size scales with area, an image twice as wide as it needs to be is roughly four times the bytes.

Frequently Asked Questions