How to Put a Photo in a Phone Mockup

Sometimes you just need a still image, a screenshot, a photo, or a design, sitting cleanly inside a phone. This guide covers how to put a photo in a phone mockup and export a crisp PNG, all in a browser, with no design software required.

When a still beats a video

A framed still is the right choice for a lot of jobs: a website hero image, a blog illustration, a pitch deck slide, a social post, or a store screenshot. It loads instantly, it is easy to place in any layout, and it shows one clear state of your app or photo without asking the viewer to press play. If you want motion instead, that is a different workflow, but for a clean static image a mockup is the fast path.

Pick the phone and fill the screen

Choose the phone that fits your audience. Framy includes 35+ iPhone models, plus iPad, MacBook, iMac, and Apple Watch if you need a different device. Once your image is in the frame, fill the screen edge to edge so there is no blank border, and make sure the important part of the photo is not clipped by the rounded corners or the notch area.

Choose the right ratio

Match the output shape to where it will live. Use 9:16 for Stories and Reels, 4:5 or 1:1 for feed posts, 16:9 for landing pages and slides, or an exact platform pixel size when a placement demands it. Framy supports all of these plus exact ad sizes, so your framed image drops straight into place.

How to put a photo in a phone mockup

1. Have your image ready (a photo, screenshot, or exported design).
2. Open the Framy editor and upload the image.
3. Pick the iPhone model or other device frame.
4. Fill the screen edge to edge and position the photo so nothing important is clipped.
5. Set your ratio or exact pixel size.
6. Export as PNG. Low quality is free forever; high-quality exports unlock via a bundle at $1.99 for 30 or $4.99 for 100, with no watermark ever.

For the full walkthrough, see the put an image in an iPhone frame guide.

Common mistakes

• Leaving a white border inside the frame instead of filling the screen.
• Letting the notch or rounded corners clip a key part of the photo.
• Using a low-resolution image that looks soft once framed.
• Choosing the wrong ratio for the destination, causing crops or bars.
• Exporting a low-resolution file for a public page.

Bottom line

Upload the image, drop it into the right phone frame, fill the screen, pick your ratio, and export a clean PNG. Putting a photo in a phone mockup takes a minute and needs no design tools.

Next steps

Frame your image in the Framy editor, read the full put an image in an iPhone frame guide, or if it is a store asset, see How to Make App Store Screenshots. If you have a clip instead of a still and want to put a video in an iPhone mockup, Framy does that too.