Image Intrinsic Width

The image's real pixel width, which lets the browser reserve the right space before the picture arrives.

Where to find it
Labelled Image Intrinsic Width in the "Selected Component" section of the Modify drawer.
Offered by
The Image component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

You have almost certainly experienced the problem this setting solves. You start reading an article, an image finishes loading further up, and the whole page jumps down mid-sentence. It is one of the most irritating things a web page can do, and Google measures it as a ranking signal.

It happens because the browser did not know how much room the image needed until it arrived. Telling it the image's real dimensions in advance — its intrinsic width and height — lets it work out the shape and hold exactly the right space open from the start. The picture then fades in without moving anything.

This number is the image's actual pixel width as it was created, not the size you want it displayed at. A 1600 by 900 photograph has an intrinsic width of 1600, even in a 400px column. Set the display size with the column's Width or Max Width.

Always set this together with Image Intrinsic Height. On its own, neither is enough for the browser to work out the shape.

When you would use it

  • Every image, without exception. This is the single most effective thing you can do for how stable your page feels.

How to change it

  1. Click the image component on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Image Intrinsic Width".
  3. Enter the image's real pixel width. Selecting an image from the media library often fills this in for you.
  4. Set Image Intrinsic Height to match.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Set both width and height or neither. One alone does nothing useful.
  • These are the image's true dimensions, not the size on screen. Getting the ratio wrong makes the reserved space the wrong shape and the jump comes back.
  • If you crop or resize the image through Cloudinary Transformations, these numbers should describe the result of that transformation.

Related settings

For developers

The technical reference for what this setting produces: MDN: the width attribute. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next