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

# Spotlights — Image sizes

The Spotlights Section is a highly flexible component designed to showcase featured products or services, drawing attention to key offerings with customisable yet consistent layouts and content.

## Basic image requirements guidelines

Each individual spotlight uses a background image as part of its layout. To ensure both the image and the content remain visually clear and accessible, the component includes a built-in exclusion zone. This exclusion zone is a protected area of the image where content will never overlap, guaranteeing that the most important visual elements of the image are always visible.

### Exclusion Zone Protection

The exclusion zone is fixed and always respected, regardless of how the section is resized or how much content is added. This means:

- Content never overlaps the exclusion zone.
- The image’s focal area remains unobstructed and consistently visible across all breakpoints.

### Content Scaling

As more content is added to the Spotlight section, the content area expands outside of the exclusion zone. This dynamic scaling ensures that:

- Content remains readable and accessible.
- The layout adapts fluidly without compromising the protected image area.

### Image Sizing

Because the exclusion zone must always be preserved, images used in the Spotlight Section need to be larger than expected. This extra image height allows for additional background to be revealed as the content area grows, while still maintaining the exclusion zone at the top of the image.

Refer to the detailed breakdown below for layout-specific requirements.

## Desktop image requirements - Landscape formats

**Please note due to the responsive nature of this Section, all three image sizes (1 landscape, 1 portrait, 1 mobile) must be provided when using the Landscape Spotlight.**

Landscape Spotlights have a 1:1 exclusion zone [1] where the image’s main focal point can safely appear without risk of being cropped or obscured across different screen sizes and viewports.

The image itself needs to be designed in a 2:1 ratio [2], so that regardless of how the Spotlight section is resized, there is always enough visual content to maintain the intended layout and preserve the exclusion zone.

**We recommend a minimum image size of 1044px x 522px.**

## Desktop image requirements - Portrait formats

Portrait spotlights have a 16:9 exclusion zone at the bottom[3]. The content block then sits on top of this, stretching upwards as more content is added.

The image itself needs to be designed in a 9:16 ratio[1], so that regardless of how the Spotlight section is resized, there is always enough visual content to maintain the intended layout[2] and preserve the exlusion zone.

**We recommend a minimum image size of 498px x 885px.**

## Mobile breakpoint image requirements

All mobile spotlights have the same 16:9 exclusion zone at the bottom[3]. The content block then sits on top of this, stretching upwards as more content is added.

The image itself needs to be designed in a 9:16 ratio[1], so that regardless of how the Spotlight section is resized, there is always enough visual content to maintain the intended layout[2] and preserve the exclusion zone.

**We recommend a minimum image size of 767px x 1364px.**