Optimize Hero Banner Images for All Devices

How the Hero Banner Works

GemPages automatically resizes Hero Banner images to improve page load speed for different devices:

• Tablet View: The image is resized to a maximum width of 1024px.
• Mobile View: The image is resized to a maximum width of 768px.

This resizing may reduce image quality when the same image is used for both desktop and mobile displays. To ensure your Hero Banner looks its best, you have two options:

1. Use a Single Image Ratio for All Devices
2. Use Separate Images for Each Device

Option 1: Using a Single Image Ratio for All Devices

If you want to use the same image across desktop, tablet, and mobile, follow these steps:

Step 1: Upload your image to the Hero Banner. Make sure the image is at least 1920px wide.

Step 2: Set the Size/Banner Ratio to As Banner Source for Desktop, Tablet, and Mobile views.

The banner will automatically resize to fit the screen size while keeping the original proportions of the image.

Option 2: Using Separate Images for Each Device

For Desktop and Tablet:

Upload your image to the Hero Banner. Make sure to use an image that is at least 1920px wide. This guarantees high-quality visuals on larger screens.

For Mobile:

Step 1: Choose the device viewport you want to optimize for.

For example, you’re optimizing the display to fit the iPhone 13 Mini, which has a width of 375px.

Step 2: Upload an image optimized for mobile devices. The image should:

• Match the banner’s width-to-height ratio.

• Have a minimum width of 768px.

Example: If your banner width is 375px (iPhone 13 Mini) and banner height is 500px, the uploaded image should maintain the same ratio of 375:500 but have a width of 768px:

Minimum Width = 768px

Calculated Height = (768/375)×500=1024px

The optimal size for this example would be 768x1024px.

How to Check Your Banner Dimensions

To ensure your image dimensions are correct, you can check the current banner size as follows:

• Banner Width: If a specific value (e.g., 375px) is set, this is your width.
• Banner Height:
  • If set to a fixed value (e.g., 500px), use this height.
  • If set to 100VH, calculate the height based on the screen’s height. For instance, a 100VH height on an iPhone 13 Mini device equals 812px. 

Other devices can refer to this table: