Cropping a Photographer’s Hero Banner: From First Edit to Mobile Review

A wide banner is not finished simply by cropping a photo to a landscape shape. You also need room for a heading or button and a composition that keeps its subject visible on smaller screens. Follow the steps below to review a crop while preserving the original image.

1. Define the banner’s purpose and frame

First, write down what the banner should show and what action it should invite. For a photographer’s portfolio, decide whether it will introduce representative work or encourage visitors to inquire about a shoot. Then check the banner area’s aspect ratio and its desktop and mobile display in the site editor. If a specific size is required, use it; otherwise, use the frame shown in the editor as your guide.

• Mark where the heading, description, and button will go.
• Choose one subject or detail that must remain visible.
• Keep the original file and edit a copy.

**Hypothetical example:** A portrait photographer’s homepage banner could show the subject’s expression and the mood of the shoot, with a “Portrait sessions” heading and an inquiry button on the left. In this layout, do not place the face near the edge of the frame or behind the text.

2. Choose an image and inspect the original

Choose a photo that suits the banner’s purpose. An image with its subject on one side can leave space for copy on the other. A centered subject, or one that fills the edges, may be cropped or obscured by text. Before editing, zoom in to check focus and exposure, and look for distracting background details.

TalkTalkMySite supports searching licensed stock photos and videos. When choosing a result, consider not just its subject but whether the composition will still work after cropping to a banner shape. Check the guidance for the selected asset to confirm its license terms and permitted use.

• Check whether the image has suitable landscape framing and open space.
• Look for busy patterns or important details where the copy will sit.
• Choose another photo if one image cannot communicate the message clearly.

3. Crop first, then position the subject

Place the image in the banner area and crop it to fit the frame’s aspect ratio. If the editor offers focus or position controls, align the subject’s face or the key piece of work. Enlarging a photo excessively just to fill the frame can make its resolution look poor; choosing a different original may be better than zooming in.

• Make sure the subject’s important features remain inside the frame.
• Adjust the image position so the subject does not overlap the heading or button.
• Check both the space around the heading and the brightness and visual complexity of its background.

If the same crop is used on desktop and mobile, part of the image may be cut off as the screen narrows. If the editor offers device previews, check each one and reposition the image for the frame when needed. Do not assume separate device-specific images are available; check the editing options you actually have.

4. Adjust the relationship between the image and copy

Once the crop is set, place the heading and button, then review the photo again. If text covers the subject or disappears into the background, move the copy or choose an image with more open space. Before making strong contrast adjustments in an image editor, check whether the copy is readable against the actual background. You can also shorten the heading so it covers less of the photo.

TalkTalkMySite supports a hero slider with up to five images. If you use more than one slide, check that the heading and button remain readable in similar positions on every image. A subject in a different place in one photo may create a clash that does not occur on the others. Adding slides is not automatically an improvement.

5. Review desktop and mobile before publishing

Check the main screen widths in the editor’s preview and, if possible, open the published page as well. The visible crop may change with screen size, so compare the editor frame with the live display.

• Check that key subjects such as faces, hands, or products are not cut off or distorted.
• Make sure the heading and button stand out from the background and are easy to distinguish as interactive elements.
• Confirm that the banner appears in the intended order after the first screen loads.
• If you use a slider, review every image-and-copy combination.

**Hypothetical example:** Suppose a landscape photographer places a mountain-ridge photo behind a heading on the left. In the mobile preview, check that the ridge is not pushed out of the frame and that the heading does not land on a dense patch of trees. If it does, adjust the heading position or image crop, then check again.

6. Record changes and choose the next action

Rather than changing several elements at once, adjust one thing at a time. For example, change the crop position and review it before moving the heading. A brief note about which screen showed the problem and what fixed it makes comparisons easier. If the crop looks different after publishing, check the browser and screen size, then review it under those conditions again.

A useful next action is to upload your chosen banner photo to the editor and mark the space for copy and the subject’s position. Then review the desktop and mobile previews separately and save a crop in which the subject remains visible and the heading and button are readable.