How to setup device-specific images in the Pages App

You can now upload two separate images for each page - one for mobile and one for desktop. This ensures your website looks great and loads fast on every device.

Key Steps.

1. Open the page and select the image

In the Pages app, open the page you want to edit.

Click the image element you want to configure.

2. Upload the Mobile image

In the image settings panel, locate the Mobile image slot.

Upload your mobile-optimized image.

3. Decide whether to override for Desktop

You have two options:

Option A — Reuse Mobile on Desktop (No Override)

Leave the Desktop slot empty.

The Mobile image will be used for all viewports.

Option B — Provide a Dedicated Desktop Image

In the Desktop image slot, upload your desktop-optimized image.

Result: Desktop will use its own image; Tablet and Large Mobile will continue to inherit from Mobile unless you override those too.

4. (Optional) Override other viewports

If your Pages app supports multiple viewports (e.g., Large Mobile, Tablet, Desktop):

Navigate to the viewport you want to adjust.

Upload a unique image (or keep inheriting from Mobile).

5. Optimize image sizes (performance & SEO)

In Resize/Optimizations, set:

Mobile → Resize width: ~768

Desktop → Resize width: ~2000 (adjust to your layout needs)

Leave height blank unless you intentionally want to crop.

Preview load times and visual clarity.

Why: Resizing width keeps aspect ratio, dramatically reduces file size on Mobile, and improves page speed and SEO.

6. Preview across devices

Use the Pages app's viewport preview (Mobile → Large Mobile → Tablet → Desktop).

Confirm each viewport shows the intended image and alt text.

7. Publish safely

Save changes.