How to prepare a photo banner for a mobile-first ad

A photo that looks great on a laptop can become a crowded blur in a phone ad. The crop may hide the product, small text may be hard to read, or an app's buttons may cover the message.

Start with the placement you plan to use, then build a simple layout around the photo. The Photo Editor lets you work with layers, text, selections, brushes, adjustments, and filters in your browser.

Prepare the banner

1. Open your photo in the Photo Editor. Choose the ad placement first, such as a feed post or a full-screen story, and check the platform's current image requirements. Common starting sizes are 1080 x 1350 pixels for a 4:5 feed image and 1080 x 1920 pixels for a 9:16 story, but placement rules vary.
2. Frame the photo for the chosen shape. Keep the main subject, such as a face or product, away from the edges. If the original photo does not fit the shape, crop around the subject rather than stretching the image. Stretching can make people or products look distorted.
3. Choose a quiet area for the message. Look for open sky, a plain wall, or a darker area with little detail. Keep the text away from the subject's face, product details, and other important parts of the image.
4. Add a short headline and, if needed, one brief supporting line. Use the text tools and keep text on its own layer so you can move or revise it without changing the photo. Give the headline the strongest visual emphasis.
5. Review the design at phone size, then export a copy that meets the placement's file requirements. Check the exported file itself, not just the editor view, before uploading it.

Keep a separate original photo. A clean source makes it easier to create another crop or revise the ad later without rebuilding the image from an edited copy.

Choose a layout that fits the ad

Feed placement

A portrait 4:5 layout usually gives a photo more height in a scrolling feed than a square image. Put the subject and headline in the central area, with some breathing room around the edges. The platform may display the ad in more than one size, so check the specific placement preview before you finalize it.

Story or full-screen placement

A 9:16 layout fills a phone screen, but platform controls and labels can sit over the image. Keep essential text and the main subject away from the very top and bottom. Leave extra clear space there, even if the full image looks empty in the editor.

Photo with little open space

If the photo is busy from edge to edge, try a tighter crop that gives the subject a clear shape, or choose another photo with a simpler background. A small amount of text over a calm area is usually easier to read than a large block placed across detailed scenery.

Text over a high-detail image

Use a separate layer for the text, and place it where the background is most even. If the words still disappear, adjust the photo locally or use a simple contrasting backing area behind the text. Keep that treatment visually quiet so the photo and message remain the focus.

Fix common banner problems

1. Shorten the headline. Remove filler words and keep one main idea. If the text takes several lines on a phone preview, the message is probably too long for a quick glance.
2. Increase contrast. Dark text can disappear on a shadowy photo, and white text can disappear against a bright sky. Move the text to a more even part of the image, adjust the area behind it, or choose a stronger text color.
3. Move text away from the edges. Leave a margin around important wording and the subject. Story interfaces and feed previews can crop or cover edge areas, so don't put a price, offer, or key detail right against the border.
4. Restore the subject in the crop. If the product or face feels cramped, try a wider crop or reposition the photo. Do not shrink the subject so much that it becomes hard to recognize on a small screen.
5. Reduce decorative effects. Remove extra filters, shapes, and secondary text if the layout feels busy. A single clear subject and a short message are easier to understand while someone scrolls.
6. Recheck the placement requirements. If the platform rejects the image or cuts off important content, confirm the required dimensions, file type, and file size for that exact ad placement. Create a separate version when placements need different shapes.

Check the finished image on a phone

Open the exported image on a phone or view it at approximately the size it will appear in the ad. Check whether the headline is readable without zooming, the subject is recognizable, and the message still makes sense at a glance. If you need to pinch or zoom to read it, simplify the design or enlarge the text.

Also check that the image is not cut off in the platform's placement preview. An ad can be cropped differently across placements, so one file may not work well everywhere. Make distinct versions when the subject or text needs a different position in a feed image and a full-screen story.

The Photo Editor runs in your browser, and photos and files you open stay on your device.