---
title: "Hero — Image sizes"
canonical: https://sky-ui.cf.sky.com/sections/hero/image-sizes
---

# Hero — Image sizes

## Basic image requirements guidelines

Each Hero Section must adhere to a specific image requirement depending on the type of Hero.
See the detailed breakdown for each section option below.

## Standard Hero image requirements

The Standard Hero requires two images, one for desktop (21:9 ratio) and one for mobile (16:9 ratio). You must be mindful of contrast requirements, and make sure that your image has suitable gradient overlay for the side that has content.

**Desktop recommended minimum image size - 1044 x 522px** <br/>
**Mobile recommended minimum image size - 799 x 1420px**

## Split Hero image requirements

The Split Hero requires just one image for both for desktop and mobile (4:3 ratio).

**Recommended minimum image size - 800 x 600px**

## Immersive Hero image requirements

The Immersive Hero requires two images, one for desktop (16:9 ratio) and one for mobile (9:16 ratio). You must be mindful of contrast requirements, and make sure that your image has suitable gradient overlay for the side that has content.

Designers should ensure the focal point of each image is centred, as the image will scale to fill the entire viewport. This means the full image is rarely visible, but centring the key visual element guarantees it remains in view across different screen sizes and aspect ratios.

**Desktop recommended minimum image size - 1600 x 900px** <br/>
**Mobile recommended minimum image size - 799 x 1420px**

## Carousel Hero image requirements

Please see the [Carousel Component](/components/carousel/) for full requirements.

**Desktop recommended minimum image size per slide - 1248 x 742px** (Ratio 21:9)<br/>
**Mobile recommended minimum image size per slide - 967 x 1720 px** (Ratio 9:16)