A Header Photo Cropped Differently on Every Screen

One photo, many shapes

The header photo was chosen on a laptop, where it looked right: the person, the product or the finished job framed nicely, with the headline beside it.

On a phone held upright, the same header shows a narrow slice from the middle of the photo. On a wide monitor it shows a thin band across it.

The subject that made the photo worth using can be cut off entirely, leaving a patch of sky, a wall or the side of a van.

Nobody notices, because everyone who approved the photo looked at it on the screen it was chosen on.

How the trimming works

Most modern designs fill the header area with the photo, whatever the screen. The photo is scaled until it covers the whole area, and whatever spills over the edges is trimmed off.

The header area changes shape with the screen. On a phone it is narrow; on a wide monitor it is long and shallow.

So the trimming changes too. Phones lose the sides of the photo, and wide screens lose the top and bottom.

Unless told otherwise, the design keeps the centre. Anything important away from the centre is at risk on one screen or another.

What gets cut

• A face near the left or right edge.
• The product, placed to one side to leave room for text.
• The finished work along the bottom of the frame.
• Heads and rooflines at the top, on wide screens.
• Lettering in the photo, such as a sign or the name on a van.
• The subject itself, hidden behind the headline on phones.

The second is the most common. Photographers and designers often place the subject to one side to leave space for a headline, and that is exactly the part a phone trims away.

Choosing a photo that survives

The safest header photo has its subject near the middle and plenty of empty space on every side: sky, water, a plain wall, a lawn.

That usually means a photo taken from further back than feels natural. The subject looks small on a laptop and fills a phone screen nicely.

Avoid photos whose meaning depends on something at the edge, such as two people where one would be cut, or a before and after side by side.

When commissioning photos for the site, tell the photographer they are for a header that will be trimmed, and ask for some wide shots with the subject centred.

Telling the design what to keep

The point the trimming keeps in view, often called the focal point, is a setting in the site's stylesheet and sometimes in the theme's options. It can be moved from the centre to wherever the subject is.

Set it on the subject, and the trimming works around it: the sides go on a phone, the top and bottom on a wide screen, and the subject stays.

The setting belongs to each photo, not to the design. A new header photo with its subject somewhere else needs the point moved again, which is easy to forget.

A worked example

A mobile dog groomer works from a fitted van, visiting homes across a few suburbs.

The header photo on its website showed the van in a driveway, with the groomer at the left lifting a freshly groomed poodle down from the side door.

On a laptop it worked. On a phone, the header showed the middle of the van's side panel, with half the business name and no dog.

On a wide monitor the top of the photo was trimmed, cutting the dog off at the ears, and the headline sat across the groomer's face.

The fix started with a new photo, taken from further back, with the groomer and the dog in the centre and lawn and driveway around them.

The focal point was set on the dog. Phones got a tighter version of the same photo, and on small screens the headline moved below it.

A separate crop for phones

Where one photo cannot serve every screen, the design can show phones a different version: the same photo, cropped closer around the subject by hand.

The stylesheet switches between the two by screen width, and each device downloads only the version meant for it.

That has a second benefit. A version cut for phones is a smaller file, so the header loads faster over a mobile connection.

Text on top of the photo

A headline set over a photo takes a much larger share of a phone screen than of a laptop's, because it wraps onto three or four lines.

On a phone it often covers the very subject the photo was chosen for, and it becomes hard to read where it crosses busy parts of the image.

On small screens, consider putting the headline below the photo instead of on it. The photo shows the work, and the text can be read.

Checking at several widths

Drag the edge of a browser window from wide to narrow and watch what the header keeps. Chrome and Firefox also have a mode in their developer tools that imitates phone screens.

Then look on real devices: a phone held upright and sideways, a tablet, a laptop, and the widest monitor in the office.

Repeat the check each time the header photo changes, not just at launch. Seasonal and promotional photos, swapped in quickly, are the easiest to forget.

The counter-case

A design that shows the whole photo at every width, scaling it down rather than trimming it, avoids the problem, at the cost of a shallow header on phones.

Some photos also survive any crop: a texture, a wide view with no single subject, a close detail of materials.

And a site that rarely changes its header photo may need one careful check rather than a routine.

For most sites with a large header, though, the work is the same: a centred subject with room around it, the focal point set, and a look at several widths.

Before the next photo goes up

1. Check the current header at five widths.
2. Note what each width cuts away.
3. Choose photos with a centred subject.
4. Set the focal point on the subject.
5. Make a tighter crop for phones.
6. Move the headline below the photo on phones.
7. Recheck every time the photo changes.

Step three saves the most work. A photo with its subject in the middle and room around it survives nearly every trim, while a badly framed one needs every other step to rescue it.

Cropping each image deliberately around its subject is the same discipline as in a portfolio grid with photos in every shape.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.