Portal Background Image Guide

  • Updated

Background images within the Swap Portal work best when they follow the rule of thirds, with the main focal point aligned to the right of the photo.

This is especially important for desktop users who see the portal background images. Users on mobile will not have the background images visible. The right alignment requirement is due to the portal sidebar, where the user will take all actions related to their return.

Recommended pixels for the portal images are 1080x2000 pixels.

 


 

Tips for the best results

  • The image used for the portal should ideally follow the “rule of thirds” for the best outcome.
  • The main focus should be right aligned in the photo.
  • The image ratio should be about 16:9.
  • A high-resolution photo yields the best results and prevents unwanted pixelation.
  • Avoid any text in the photo. Logos and text within the photo might cause the background to appear misaligned.
  • The image's primary focus should not be up to the edge of any image border.

Exceptions

  • If the photo has focal points to the left and right and you’d like only the right focal point to show, it can be used for the portal.

Considerations

  • Your customers will be using various screen sizes. This will cause the background image to appear cropped slightly differently across screen dimensions. This is normal and should be expected.

 


 

Rule of Thirds Examples

Screen Shot 2024-03-20 at 9.45.35 AM.png

Screen Shot 2024-03-20 at 9.45.51 AM.png

 


 

Good Examples

Screen Shot 2024-03-20 at 9.43.54 AM.png

Screen Shot 2024-03-20 at 9.44.07 AM.png

 


 

Bad Examples

Screen Shot 2024-03-20 at 9.53.59 AM.png

Screen Shot 2024-03-20 at 10.05.18 AM.png

Screen Shot 2024-03-20 at 9.54.31 AM.png

Screen Shot 2024-03-20 at 9.55.14 AM.png

Screen Shot 2024-03-20 at 9.56.06 AM.png

Adjusting "Bad" Images

If you’d like to use a non-ideal image as the background, consider extending the current background to the left using image editing software like Photoshop or AI extender tools like Phot.ai.

Before

Screen Shot 2024-03-20 at 10.10.56 AM.png

After

Added background.png

Related to

Was this article helpful?

/