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.

See this workaround in our Community on how to add high-resolution retina images

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.

Image_Resolution.png

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.

Image_Alignment.gif

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.

Distribution.gif
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.