Banner Photo Crop Guide

How to frame photos for the website banners.

Safe Area — Always visible on all devices (desktop, tablet & mobile)

Tablet visible — Extra area visible on tablet and desktop

Desktop only — Only visible on large screens

Text zone — Keep a calm/plain background here for the text overlay

Show guides Show labels

Adjust banner height:

Desktop 16 /

Tablet 16 /

Mobile 16 /

Example 1 — Text left

The headline sits on the left. Keep the left half of the photo calm.

Desktop only Cropped

Tablet+ Cropped

Safe Area — always visible

TEXT ZONE
Clean background

The headline sits in the middle. Keep the centre of the photo calm.

Desktop only Cropped

Tablet+ Cropped

Safe Area — always visible

TEXT ZONE
Clean background

The headline sits on the right. Keep the right half of the photo calm.

Desktop only Cropped

Tablet+ Cropped

Safe Area — always visible

TEXT ZONE
Clean background

🖥️

Width: 1440px+

Banner height: ~500px

Full photo visible

📱

Width: 768px – 1439px

Banner height: ~400px

Sides slightly cropped

📲

Width: <768px

Banner height: ~300px

Only safe area visible