Hero photos are the big, eye‑catching images at the top of a webpage. They’re often the first thing visitors see, so choosing the right photo is important. But there’s a catch: the hero photo needs to look good on both desktop computers and mobile phones, and these screens are shaped very differently.
This guide explains how to pick and frame a photo that works beautifully everywhere.
Why hero photos behave differently on desktop and mobile
- On a desktop, the hero area is wide and horizontal.
- On a mobile phone, the hero area becomes tall and vertical.
Because of this, your photo will be cropped differently depending on the device. Parts of the image that appear on desktop may be cut off on mobile, and vice‑versa.
That’s why the way the photo is framed matters.
The Safe Zone: Keep the important part in the middle
The most important rule is simple:
Make sure the main subject of your photo is in the centre.
This middle area is called the safe zone. It’s the only part of the image that will always be visible on both desktop and mobile.
Good examples of subjects to keep in the safe zone:
- A person
- A product
- A building
- A vehicle
- A sign or landmark
If the subject is too close to the edges, it may disappear completely on mobile.
Choose wide photos, not tight close‑ups
Wide photos give your website room to crop the image for different screen sizes.
Good
- A person standing in a landscape
- A shopfront with space around it
- A product on a clean background
- A scenic location with sky and ground visible
Avoid
- Close‑up portraits
- Tight product shots
- Photos where the subject touches the edges
- Busy backgrounds with lots of detail
Wide photos are more flexible and look better across all devices.
Leave breathing room around the subject
Try to choose photos with extra space around the main subject, especially on the left and right sides.
This space becomes your buffer when the image is cropped for mobile.
Think of it like this:
- Desktop crops the sides
- Mobile crops the top and bottom
- Extra space keeps everything looking natural
Avoid text inside the photo
If your photo contains text (like a sign, banner, or slogan), it may get cut off on mobile.
Instead:
- Choose a clean photo
- Add your headline or message as real text on the webpage, not inside the image
This keeps your message readable on all devices.
Keep backgrounds simple
Simple backgrounds look cleaner and survive cropping better.
Busy backgrounds can:
- distract from your message
- look messy on mobile
- make the hero area feel cluttered
Clean backgrounds help your subject stand out.
Always preview the photo on both desktop and mobile
Before finalising your hero image, check how it looks on:
- Desktop
- Tablet
- Mobile
If the subject stays visible and the photo still feels balanced, you’ve chosen a great hero image.
Quick checklist for hero photos
Use this list when choosing your hero photo:
- Is the main subject in the centre?
- Is the photo wide enough?
- Is there space around the subject?
- Is the background simple?
- Is there no text inside the photo?
- Does it look good on both desktop and mobile?
If you can say “yes” to all of these, your photo is a good candidate for a web page hero image.
Examples
These examples show how an image can be suitable or unsuitable for a dynamic web page hero. The design of the page and how the hero image is presented can change whether the image is suitable for mobile or desktop. These examples are showing what needs to be considered when choosing a hero image for your project.
Close subject
This photo has the subject too close with little spacing around it. The desktop view removes all of the spacing at the top. Depending on what is displayed, this may be okay but it is still not ideal. The real problem is shown when it changes to mobile view. Significant parts of the subject are cropped away, losing detail.
Spacing around subject
This photo has more spacing around the main subject. Spacing lost at the top and bottom of the Desktop view do not detract from the hero image. The Desktop view has cropped the left a little but the subject is predominantly in view with the head centred.
