Mockup Resolution and Export Settings

You can build a perfect frame, set great lighting, and still ship something that looks cheap, all because of one slider. Getting mockup resolution right is the difference between a crisp hero that reads on a retina laptop and a soft, blurry image that makes the whole design look amateur. The good news is that the rules are simple once you see them laid out.

This guide is for designers, marketers, and founders who export mockups for web, social, app stores, and print, and want every one to stay sharp. I will explain DPI and PPI in plain terms, when to use 1x, 2x, or 3x, the real difference between PNG and JPG, and when transparency matters. A settings table at the end gives you a quick lookup for any channel.

Key takeaways

DPI and PPI in plain terms

DPI and PPI get mixed up constantly, so let me make them simple. PPI means pixels per inch, and it describes how many pixels fit in an inch on a screen. DPI means dots per inch, and it describes how many ink dots a printer lays down per inch. They sound alike but they answer different questions.

For anything that lives on a screen, DPI does not matter. A web browser, a phone, and a social feed all care only about pixel dimensions, not the DPI tag stored in the file. A 2000 pixel wide image looks the same whether the tag says 72 or 300.

DPI only matters when you print. A printer needs enough pixels per inch to look smooth on paper, usually around 300. So the rule is easy: think in pixels for screens, and think in DPI only when the mockup is headed to print. For print-bound work, export at the highest scale you have.

The one number that matters for screens

Pixel dimensions are the number that matters online. A frame exported at 1200 by 800 pixels has exactly that many pixels to work with, regardless of any DPI tag. When someone says an image looks soft on retina, they mean it does not have enough pixels for the space it fills, not that the DPI is wrong.

What 1x, 2x, and 3x actually mean

Modern screens pack more pixels into the same physical space, which is why a 1x image can look soft on a retina display. Exporting at 2x or 3x renders the mockup at two or three times the pixel dimensions, so it stays sharp when the screen squeezes those pixels in tightly.

Think of it as drawing the same picture on a bigger canvas with finer detail. A 1x export is fine for a quick draft or a low-resolution preview. A 2x export covers most modern web and retina laptops. A 3x export is for print-grade output or very large hero images where every edge must stay clean.

Picking a scale without overthinking

The safe default for most web work is 2x. It looks sharp on retina screens and keeps file sizes reasonable. Drop to 1x only when you need a fast preview and file size matters more than crispness. Reach for 3x when the mockup goes to print or fills a very large area, where the extra pixels earn their weight. In Zepixo the 3x export is part of Pro, and you can read the details in our export documentation.

PNG vs JPG for mockups

The format you choose changes both quality and file size. PNG and JPG solve different problems, and using the wrong one is a common reason exports look bad or break a layout.

PNG is lossless, which means it keeps every pixel exactly as rendered, with crisp edges on UI, text, and device frames. It also supports transparency, so you can export a device with no background and place it anywhere. The trade-off is a larger file when the image is photographic.

JPG is lossy, which means it discards some detail to shrink the file. It works well for photo-heavy backgrounds where the eye will not notice the loss. But JPG cannot store transparency, and it adds visible smudges around sharp edges and text, which makes it a poor choice for clean UI mockups.

A simple rule

If the mockup has a UI, sharp text, or needs a transparent background, use PNG. If it is a flat scene over a photo and you want a smaller file, JPG is fine. When in doubt, PNG keeps you safe for design work.

When transparency matters

Transparency is the most underused export setting. A transparent PNG has no background, just the device or frame floating on nothing, so you can drop it over any color, gradient, or photo on your page. That flexibility is why design teams almost always keep a transparent version on hand.

Export with a background when you want a finished, standalone image, like a social post or a slide. Export without a background when the mockup will sit inside a layout you control, so it blends into your section. Keeping both versions saves a re-export later. Our website mockup walkthrough shows this in a real hero.

A practical export workflow

Here is the order I follow so I never ship something soft. It takes seconds once it is a habit.

First, capture at the highest resolution available, because export cannot add detail that was never there. Second, pick the scale for the destination: 2x for web, 1x for a quick draft, 3x for print or a giant hero. Third, choose the format: PNG for UI and transparency, JPG only for photo-flat scenes. Fourth, decide on a background or transparency based on where the image will live. Then export and check it at full size before you ship.

For a five second 360 spin instead of a still, render the video export, which is great for social and heroes. The video export is a Pro feature, and you can see how it fits in our animated video mockups guide.

Mockup resolution settings for every channel

Here is the quick lookup. Match the channel to the row and you will rarely go wrong.

For app store sizing in particular, follow the exact pixel dimensions in Apple's App Store screenshot specifications, and see our app store screenshot guide.

Ready to export crisp? Open Zepixo Mockups, build your frame, and export at the right scale and format in one place, with 3x and spin video on Pro.

Common export mistakes

The first mistake is exporting at 1x and wondering why it looks soft on a retina screen. Default to 2x for web and you avoid it entirely. The second is using JPG for a UI mockup, which smudges text and kills crisp edges. Use PNG for anything with an interface.

The third is forgetting transparency and ending up with a white box on a colored section. Keep a transparent PNG so the frame blends into any background. The fourth is upscaling a small capture, which only stretches blur. Always start from the highest resolution input you can get, as we cover in realistic mockup tips.

Frequently asked questions

What resolution should I export a mockup at?

Export at 1x for quick drafts, 2x for web and retina screens, and 3x for print or very large heroes. For screens, pixel dimensions matter, not the DPI tag. The 3x option is part of Zepixo Pro.

Does DPI matter for web mockups?

No. Screens care only about pixel dimensions, so the DPI tag has no effect online. DPI matters only when you print, where around 300 DPI keeps the image smooth on paper.

Should I use PNG or JPG for mockups?

Use PNG for anything with a UI, sharp text, or a transparent background, since it is lossless and supports transparency. Use JPG only for photo-heavy flat scenes where a smaller file matters more than crisp edges.

What is the difference between 1x, 2x, and 3x?

Each multiplies the pixel dimensions of the export. 1x is the base size, 2x doubles it for retina sharpness, and 3x triples it for print or large heroes. Higher scale means more pixels and crisper edges on dense screens.

When do I need a transparent background?

Use a transparent PNG when the mockup will sit inside a layout you control, so it blends over any color or photo. Export with a background when you want a finished, standalone image like a social post.

Why does my mockup look blurry?

Usually the input was low resolution or you exported at 1x for a retina screen. Capture at the highest resolution available and export at 2x or higher. Never upscale a small image, since that only stretches the blur.

Pick the right scale and format once, make it a habit, and your mockups will stay crisp everywhere they land.