Image Intrinsic Height

The image's real pixel height, used with the width so the browser can hold the right space open.

Where to find it
Labelled Image Intrinsic Height in the "Selected Component" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

This is the partner to Image Intrinsic Width, and the two only work as a pair. Together they tell the browser the shape of the picture, so it can reserve exactly the right space before the file has downloaded and the page does not jump when it appears.

As with the width, this is the image's real pixel height as it was created — 900 for a 1600 by 900 photograph — not the height you want it displayed at. Display height is a column setting.

When you would use it

  • Every image, alongside Image Intrinsic Width.

How to change it

  1. Click the image component on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Image Intrinsic Height".
  3. Enter the image's real pixel height. Selecting from the media library often fills this in for you.
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

  • A height without a width does nothing. Set both.
  • If the ratio between the two numbers does not match the real image, the browser reserves a space of the wrong shape and you get a smaller version of the same jump.

Related settings

For developers

The technical reference for what this setting produces: MDN: the height 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