Set Image Dimensions for Mobile and Desktop

You can give an image one size on desktop and another on phones, which keeps pages sharp, balanced and fast to load.

Why it matters

Properly sized images improve how the page adapts to small screens, reduce layout shift while loading and help page speed scores that affect search visibility.

Set the dimensions

  1. Open the page in the builder and click the image.
  2. Use the view toggle at the top to choose Desktop or Mobile.
  3. In the image settings, enter a Height and Width.
  4. Choose a unit: px for fixed pixels, rem or em for sizes relative to text, or % for a share of the container.
  5. Switch to the other view and repeat if you want different values.
  6. Save and preview both views.

How the views relate

Without mobile values, the image uses its desktop dimensions. Values you enter while in the mobile view apply to mobile only. You can mix units, for example a fixed height with a percentage width.

Existing images

Current images keep their size until you change them, so nothing shifts unexpectedly.

Recommendations

  • Use percentages for full-width images that should fit any screen.
  • Use pixels when you need exact control.
  • Upload images no larger than needed.

Good to know: Always set a height and width so the page does not jump while pictures load.

Was this article helpful?