Working with Image Resolution & Alignment

Follow

To check your image resolution, single-click the image in the builder and locate the Image Resolution section in the Properties tab. 

The retina definition feature allows you to customize your landing page according to the viewer’s device specifications. If your page visitor has a high-definition screen that can load higher-resolution images, this feature ensures that a high-quality version of your image appears for your visitor.

This will display the image resolution in three resolution tiers (in ascending order of quality):

1x: Standard Definition.
2x: Retina Definition.
3x: High(er) Retina Definition.

Unbounce page builder showing Image Resolution panel with 1x enabled and 2x, 3x disabled for a selected image element.

Pro Tip

If your image isn't crisp or showing the 3x checkmark in the Builder, try uploading a version of the image with higher dimensions and image quality.

Working with Image Alignment & Distribution 

To adjust your image alignment, single-click the image in the Builder and use the Align buttons at the top or bottom of the image to choose one of the following alignment options:

  • Align Left.
  • Align Horizontally.
  • Align Right.
  • Align Top.
  • Align Vertically.
  • Align Bottom.

A logo image selected in a web editor canvas, centered on a dark teal background, showing desktop/mobile view toggle options.

If you select multiple images simultaneously by holding down the Shift key, you'll see two more options for distribution. These options will evenly distribute the selected elements horizontally and/or vertically:

  • Distribute Horizontally.
  • Distribute Vertically.

Marque editor canvas showing three logo icons at different sizes and positions demonstrating image distribution layout.
To move these images across the page, continue to hold down the Shift key & use your arrow keys to move the images.

Align Your Images Using Page Guides

The Unbounce Landing Page Builder generates guidelines for you to use when lining up multiple elements on your landing page. These green lines allow you to align your image with the other elements on your page or center them within boxes or page sections.