Choose banner image size

This guide applies to Aurora version 2.4.0 and newer

Aurora has adaptive theme sections. For most of them, you can set the width and height. Hence, there are no fixed image resolutions for banner sections. The 2.4.0 update made it possible to choose the optimal size for banner images by introducing desktop ratio and mobile ratio for these banner sections:

  • Image banner

  • Split image banner

  • Countdown banner

  • Before/after images

  • Hero banner

  • Slideshow

  • Newsletter

  • Video etc.

Here’s how to choose the size for banner images, that is optimal both in terms of visual quality and store speed.

On desktop

To calculate the optimal size for the banner images on desktop, follow the steps below:

  1. Choose the section Width. The pixel values are below.

Page - from 1400 to 3000 px (set it up in Theme settings > Appearance)
Large - 1320 px
Medium - 1140 px
Small - 960 px
XSmall - 720 px

  1. Set the Desktop ratio for the section.

  2. Calculate the image height in pixels based on the chosen Width value and the Desktop ratio value. Note that width stands for 1 in the ratio setting.

Example:

Width "Large" (1320 px)
Desktop ratio "0.5 : 1" (where 0.5 = height; 1 = width)

Height = 0.5 * width = 0.5 * 1320 px = 660 px

Image resolution:
Width = 1320 px
Height = 660 px

Note that the ‘Screen’ width value adapts to the screen resolution of the device. We recommend using high-quality images and considering the Desktop ratio value.

On mobile

The mobile screen width also adapts to the screen resolution of the device. We recommend using high-quality mobile images - optimal width is 768 px - and consider the Mobile ratio value.

Example:

Optimal width - 768 px
Mobile ratio "2 : 1" (where 2 = height; 1 = width)

Height = 2 * width = 2 * 768 px = 1536 px

Image resolution:
Width = 768 px
Height = 1536 px

Last updated