mockmagic.com

Upload your screenshot or screen recording to a device mockup generator, pick an iPhone frame, choose a layout and background, then export. On Mock Magic, image mockups are free and unlimited, while video mockups require a paid plan. The workflow below covers both, plus the format and troubleshooting details that decide whether your export looks sharp or slightly off.

Image vs. video mockup: which one do you need?

If your content is static, a still mockup is faster and easier to place in layouts. If you need to show motion — a scroll, an animation, a tap flow — you need the video path, and that means a paid subscription.

Step-by-step: build the mockup

1. Prepare your source file. For a screenshot, export it at the native resolution of the phone you're framing (or close to it) rather than a downscaled copy. For a recording, export MP4 or WebM.
2. Upload it. Drop the screenshot or screen recording into the editor. The tool places your content inside the device screen area.
3. Pick the iPhone frame. Mock Magic offers 54+ device variants across iPhone, Android, iPad, MacBook, desktop monitors, and smartwatches, and the library is updated with new devices. Choose the iPhone model that matches your screenshot's aspect ratio.
4. Choose a layout template. Templates cover different orientations, single-device layouts, and multi-device compositions. Some templates are free; premium templates with advanced layouts are Pro-only.
5. Set the background (optional). Use a solid color from the color picker, a gradient, or upload your own background image. Custom backgrounds are saved to your account so you can reuse them in later mockups.
6. Export. Download in high resolution. Image exports are free; video export requires Pro.

The whole sequence is upload → frame → layout → background → export, and the site describes it as taking seconds.

Backgrounds: when they help and when they hurt

Backgrounds are optional. A solid color or gradient keeps the focus on the screen content and works well for App Store screenshots where consistency across a set matters. A custom background image can place the phone in a context — a desk, a brand-colored scene — but a busy image competes with the UI you're trying to show.

Practical rule: if the screenshot is dense (a dashboard, a feed), use a flat or subtle gradient. If the screenshot is sparse (a splash screen, a single button), a richer background adds visual weight.

Common problems and what to check

Screenshot proportions don't match the frame. A screenshot from one phone model stretched into a different model's frame will look distorted. Match the frame to the source aspect ratio, or crop the screenshot to the frame's ratio before uploading.

Export looks blurry. This usually traces back to the input, not the export. Upload the highest-resolution screenshot you have; a low-res source stays low-res no matter how it's framed.

Video won't upload. Confirm the file is MP4 or WebM. Other containers aren't listed as supported. Also confirm your plan includes video — video mockups are a Pro feature, so a free account will not export them even if the upload succeeds.

Custom background isn't available later. Custom backgrounds are saved to your account, so make sure you're signed in when you set them, otherwise they won't carry over to your next mockup.

Quick decision guide

• Free, still images only, unlimited → use Mock Magic's free plan for screenshots.
• Need motion → budget for Pro, and record in MP4 or WebM.
• Need multiple devices in one image → check whether the multi-device template you want is free or premium before committing to a layout.
• Need a consistent set for a store listing → build one background, save it, and reuse it across every screenshot.

You can cut most images to a fraction of their original file size without any visible quality loss by doing three things in the right order: resize the image to the dimensions it will actually display at, pick the right format for the content, then apply compression at a quality level that survives a side-by-side check. The single biggest mistake is skipping step one — an oversized image compressed at maximum quality is still far heavier than a correctly sized one.

Why file size and quality are a trade-off, not a fixed setting

Every compressed image is a negotiation between three variables: how many pixels you keep, how precisely each pixel is described, and how much the format is allowed to guess.

• Dimensions decide how many pixels exist at all. Halving width and height removes 75% of the pixel data before any compression happens.
• Quality level decides how aggressively the encoder discards detail it thinks you won't notice.
• Format decides the kind of discarding allowed — some formats throw away color precision, others only remove redundancy.

Because these interact, "quality 80" means something different on a 4000px photo than on a 600px thumbnail. Tune dimensions first, then quality.

Pick the format before you touch the quality slider

Practical rule: photos → JPEG or lossy WEBP; flat graphics and transparency → PNG or lossless WEBP; anything vector → SVG.

The four levers, in the order you should pull them

1. Resize to display size (biggest win, zero quality cost)

If your layout renders an image at 800px wide, serving a 2400px original wastes roughly 89% of the pixels. Resize to the largest size it will ever be displayed at, and add a 2× version only if you need retina sharpness.

2. Choose the format

Match the format to the content type using the table above. Converting a photographic PNG to JPEG or WEBP alone can shrink it by 80% or more.

3. Set the quality level

For JPEG and lossy WEBP, most photographs hold up well between quality 70 and 85. Below ~60, banding appears in skies and blur around text. Above ~90, file size climbs steeply for gains nobody can see.

4. Strip metadata

EXIF data, camera info, and embedded thumbnails can add tens of kilobytes. Remove them unless you specifically need copyright or orientation data — and note that stripping orientation can rotate an image, so verify after export.

When lossy compression is fine, and when it isn't

Lossy is acceptable when:

• The image is a photograph or has natural texture.
• It's decorative or below the fold.
• Slight softening won't be noticed at final display size.

Use lossless or vector instead when:

• The image contains text, UI elements, or thin lines (lossy creates ringing artifacts).
• It's a logo, icon, or diagram — SVG or PNG keeps edges clean.
• It will be edited again later; repeated lossy saves compound degradation.
• It's a screenshot of code or a chart where color accuracy matters.

Compressing vs. resizing: don't confuse them

Compressing reduces the bytes needed to describe the same pixels. Resizing reduces the number of pixels. They're independent, and resizing usually delivers the larger saving. A 3000×2000 photo at quality 95 might be 2 MB; the same photo resized to 1200×800 at quality 80 might be 180 KB. Doing only the quality reduction gets you maybe 40% off; doing both gets you over 90%.

A repeatable workflow

1. Determine the maximum display width in your layout (inspect the element or check your CSS).
2. Export at that width (plus a 2× variant if needed).
3. Convert to the right format — WEBP as a modern default, JPEG as a fallback, PNG/SVG for graphics.
4. Apply quality 75–85 for lossy formats and compare against the original.
5. Strip metadata and re-check orientation.
6. Verify before publishing (see below).
7. Serve the right file with srcset so small screens don't download the large variant.

How to verify quality before you publish

• View at 100% at final display size, not zoomed in — artifacts you can't see at real size don't matter.
• Toggle between original and compressed in a viewer or an online compressor's before/after preview.
• Check the worst-case areas: skies, smooth gradients, sharp edges, and any text.
• Compare file sizes and ask whether the extra kilobytes buy visible improvement. If not, go smaller.
• Test on a mid-range phone, where banding and blur are often more obvious than on a desktop monitor.

Common mistakes

• Compressing a full-resolution image and calling it optimized.
• Using PNG for photographs.
• Setting quality to 100 "to be safe" — it inflates size with no visible benefit.
• Re-saving a JPEG repeatedly, stacking artifacts each time.
• Forgetting that GIF animations are usually better as WEBP or video.
• Ignoring metadata, which can silently add weight.

Quick reference

The order matters more than any single setting: resize, then choose format, then tune quality, then strip metadata, then verify at real display size. Follow that sequence and you'll routinely land at 10–20% of the original file size with no quality your visitors can detect.

A website mockup is a realistic visual of a web page placed inside a browser window or device frame, used to show how the design looks in context rather than as a flat screenshot. You create one by uploading a screenshot of your page, choosing a frame (browser, laptop, phone, or tablet), optionally adding a background, and exporting at high resolution. Tools like Mock Magic handle this in a few steps: upload your screenshot, pick a device frame, and export in seconds — image mockups are free, while video mockups require a paid plan.

Website mockups vs. wireframes, prototypes, and app mockups

These terms get used interchangeably, but they describe different stages and outputs:

The key distinction: a wireframe or prototype is about structure and behavior, while a website mockup is about presentation. You're not testing whether the layout works — you're showing what it looks like on a real screen. Website mockups and app mockups overlap heavily; the difference is mainly the frame (browser or laptop vs. phone) and the aspect ratio of the content you're placing.

When to use a website mockup

• Portfolio pieces — showing a live-looking site in a laptop or browser frame reads as more finished than a bare screenshot.
• Client presentations — a framed mockup communicates "this is how it will appear to users" more clearly than a raw image.
• Landing page previews — useful for social posts, ads, or email headers where a flat screenshot looks unfinished.
• Marketing visuals — product pages, case studies, and feature announcements often need the site shown in context.

If your goal is to explain how a page works, a prototype serves you better. If the goal is to show how it looks, a mockup is the right format.

Static image vs. video mockup

Both are supported by tools like Mock Magic, and the choice depends on what you're demonstrating:

• Static image mockup — best for finished designs, portfolio shots, and any situation where the page doesn't change. Fast to produce and easy to reuse. On Mock Magic, image mockups are free and unlimited.
• Video mockup — best when motion matters: scrolling, animations, hover states, or a screen recording walkthrough. Mock Magic supports MP4 and WebM uploads for video mockups, but this is a Pro feature.

A practical rule: if a still frame tells the whole story, use an image. If the design's value is in how it moves or responds, use video.

How to create a website mockup

The general workflow is the same across tools. Using Mock Magic as the example:

1. Capture your page. Take a full-page or viewport screenshot of the website at the resolution you want to present. Clean up browser chrome, scrollbars, or personal data first.
2. Upload the screenshot. Mock Magic accepts PNG, JPG, and SVG for images. For video mockups, MP4 and WebM.
3. Pick a frame. Choose a browser window, laptop, desktop monitor, phone, or tablet. Mock Magic offers 54+ device variants including iPhone, iPad, MacBook, and Android devices, plus layout templates for single-device and multi-device compositions.
4. Set the background (optional). Use a solid color, a gradient, or upload your own background image. Custom backgrounds are saved to your account for reuse.
5. Export. Download in high resolution. Image exports are free; video exports require a Pro subscription.

Expected result: a high-resolution image or video of your page inside a realistic frame, ready to drop into a presentation, portfolio, or marketing asset.

Common snags:

• Screenshot resolution too low for the frame — the page looks blurry inside a crisp device. Capture at a higher resolution than you think you need.
• Aspect ratio mismatch — a desktop screenshot in a phone frame will crop or letterbox awkwardly. Match the frame to the content.
• Cluttered backgrounds — a busy background competes with the design. Solid or subtle gradients usually read better.
• Wrong frame for the audience — showing a desktop site in a phone frame can confuse viewers about what you actually built.

Choosing a tool

If you only need static image mockups, a free tier covers most needs — Mock Magic offers unlimited free image mockups and a library of templates, with some templates reserved for Pro. If you need video mockups, animated content, or premium multi-device layouts, expect to move to a paid plan. Check the tool's pricing page for current tiers, since feature limits and template access change over time.

Drop your screenshot into a MacBook frame, size the canvas for where it will be published, then export at up to 4× or copy it straight to your clipboard. On Device Shots this runs entirely in the browser with no sign-up, and you can start either from a MacBook template or from a blank canvas up to 6000 px. The steps below follow that order: pick the canvas, add the MacBook frame, place the screenshot, style it, export.

Step 1: Pick a canvas size that matches where the image will live

The canvas decides the aspect ratio, and the aspect ratio decides whether your MacBook mockup gets cropped later. Start from a template when one matches your destination, or set a custom canvas if you need something else.

A MacBook screen is wide, so a wide canvas (16:10 or 16:9) leaves less empty space around the device than a square or portrait one. If your target is a portrait format like a Pinterest pin, expect to scale the MacBook down and use the extra room for a headline.

Step 2: Add the MacBook frame

Choose a device frame, then drop, paste, or upload your screenshot into it. The site lists 76 phones, tablets, laptops, and watches, so pick the laptop frame that matches the machine you want to show. If you would rather show a web page than a laptop body, the browser window option gives you 9 vector window styles in light or dark, each with an address bar you can type into — useful when the point is the site itself rather than the hardware.

Two practical notes:

• A MacBook frame implies a desktop layout. A screenshot taken on a phone will look stretched inside it, so use a desktop-width capture when possible.
• Browser frames stay sharp at any size because they are vector, which matters if you export large.

Step 3: Place the screenshot inside the screen

Drop, paste, or upload the image, then adjust position and scale until it sits inside the screen area without clipping the edges of your UI or distorting the aspect ratio.

• Match the aspect ratio first. If your screenshot is 16:9 and the laptop screen area is 16:10, you will either crop a little or leave a thin band — decide which edge can lose a few pixels.
• Keep the top of the screenshot aligned with the top of the screen. Cropping from the bottom usually reads as intentional; cropping the header does not.
• Avoid non-uniform scaling. Stretching to fill is the most common reason a mockup looks fake.

Step 4: Style the background, shadow, and text

Background, text, shadows, and icons are all adjustable. For a portfolio or Dribbble shot, a dark studio background with a soft shadow reads as a product shot. For a landing page hero, a light background with a headline above or beside the laptop usually fits the surrounding page better. Add a headline only if the image will be seen without supporting copy — a social post or a thumbnail — and keep it short enough to read at the size it will actually appear.

Step 5: Export at the right resolution

Export at up to 4×, or copy straight to the clipboard. The 4× option matters when the mockup will be displayed larger than its canvas size, such as a retina hero image or a presentation on a big screen. Copying to the clipboard is the faster path when you are pasting into a design tool or a chat.

Check two things before you finish:

• Export size versus canvas size. A 1600 × 1200 canvas at 4× gives you 6400 × 4800, which is more than most destinations need. Match the export multiplier to the final display size rather than always using the maximum.
• Background transparency. If the background is transparent and the destination expects a solid color, the mockup may render on white or black unexpectedly. Set a background color when in doubt.

Common problems and what causes them

The screenshot looks blurry. Usually the source capture is lower resolution than the space it fills. Re-capture at a higher resolution, or reduce how much of the canvas the laptop occupies.

The image is stretched or squashed. The screenshot's aspect ratio does not match the screen area and it was scaled to fill. Scale uniformly and crop instead.

The export is the wrong size. The canvas was set for one platform but exported for another. Re-check the template size against the destination's requirements before exporting.

The background came out transparent or the wrong color. No background was set. Add one if the destination does not handle transparency.

The laptop looks too small or too large in the frame. This is a canvas choice, not a device choice. A wide canvas with a laptop that fills most of the width reads better than a square canvas with a small laptop floating in the middle.

When this approach fits

This workflow suits anyone who needs a MacBook mockup from an existing screenshot for a portfolio, landing page, or social post, and who wants to stay in the browser without installing anything or creating an account. It is less suited to work that needs custom 3D perspective, reflections, or a specific physical MacBook model rendered from an angle — the frames here are flat, front-facing device and browser shells.

An app mockup is your app's interface placed inside a realistic device frame—a phone, tablet, laptop, or watch—so it looks like the software is actually running on that hardware. You make one by uploading a screenshot or screen recording to a mockup tool, picking a device frame and background, then exporting the result as an image or video. This is different from a UI design file (which is the editable source) and from a live prototype (which is clickable). A mockup is the presentation layer: a static or moving picture meant to be looked at, not interacted with.

App mockup vs. screenshot vs. UI design vs. prototype

These four get used interchangeably, but they solve different problems.

The practical rule: use a mockup when the goal is to make your app look credible and finished in front of an audience. Use a design file when the goal is to change the design. Use a prototype when someone needs to click through it.

Where app mockups actually get used

• App Store and Google Play listings — framed screenshots read as more professional than bare captures and let you add context (backgrounds, multiple devices).
• Portfolios and case studies — a device frame signals "this shipped" rather than "this is a sketch."
• Landing pages and marketing sites — hero images of the app on a phone convert better than a flat screenshot.
• Social media — a phone frame gives vertical content a natural focal point.
• Video mockups — a screen recording inside a device frame, useful for feature demos and ads.

How to make one

The workflow is the same across most tools. Using Mock Magic as the concrete example:

1. Prepare your source. Export a clean screenshot (PNG, JPG, or SVG) or a screen recording (MP4 or WebM). Crop out status bars or personal data you don't want shown.
2. Upload it to the mockup editor.
3. Pick a device frame. Mock Magic offers 54+ device variants including iPhone, Android phones, iPad, MacBook, desktop monitors, and smartwatches. Match the frame to where your app actually runs—showing a phone app in a laptop frame undermines the point.
4. Choose a layout template. Options include single-device layouts, different orientations, and multi-device compositions. Some templates are free; advanced layouts are Pro-only.
5. Set a background. Solid colors and gradients are built in, and you can use a custom color picker or upload your own background image. Custom backgrounds save to your account for reuse.
6. Export. Images export free and in high resolution. Video mockups require a paid plan.

Expected result: a high-resolution image (or video) of your interface inside a device, ready to drop into a store listing or page.

Common snags: low-resolution source screenshots look soft once scaled into a frame—start from a full-resolution capture. Recordings in unsupported codecs won't upload, so stick to MP4 or WebM. And if your design has a light UI, a light background can wash it out; a gradient or darker background usually separates the device better.

What to check before choosing a tool

• Device coverage — does it include the specific models your audience recognizes? A current iPhone frame matters more than a generic phone outline.
• Video support — image-only tools are common; video mockups are often the paid tier. Mock Magic follows this pattern: unlimited free static mockups, video on Pro.
• Background control — built-in gradients are fine, but custom colors and uploaded background images give you brand consistency.
• Export resolution — "high resolution" should mean enough pixels for a retina display or a store listing's required dimensions.
• Free tier limits — check whether the free plan caps exports, watermarks them, or restricts templates. Mock Magic's free plan is unlimited for images, with premium templates and video behind Pro.
• Template library — single-device layouts are table stakes; multi-device compositions save real time when you need a landing-page hero.

If you only need static images and a handful of devices, a free tier is usually enough. If you're producing demo videos or need advanced multi-device layouts, budget for the paid plan.