Choosing an export format for a mockup

Three formats cover everything you will export from a mockup tool, and the choice comes down to two questions: does it need transparency, and is it going into a store that has opinions? Getting this wrong produces either a rejected upload or a needlessly heavy page.

PNG for stores and for anything with transparency

PNG is lossless, supports alpha, and is universally accepted. Use it for store screenshots and app icons, and for any mockup you will composite onto another background later. Its weakness is file size on photographic content — but a device on a gradient is exactly the kind of image PNG handles efficiently, so this is rarely a real cost. Remember that store screenshots must not actually contain alpha, so flatten before export even when the format allows it.

JPEG when the file is large and flat colour dominates

JPEG has no alpha and loses detail, but at high quality it is invisible for most product renders and can be a fraction of the size. It is the right choice for large feature graphics and for web images where bandwidth matters more than pixel-perfect edges. Watch for banding in smooth gradients, which is where its artefacts show first, and never re-export a JPEG from a JPEG — go back to the source.

WebP for the web, with a fallback mindset

WebP gives smaller files than both at comparable quality and supports transparency, which makes it the sensible default for your own website. It is not accepted for store listing uploads, so keep the store exports separate. If you are exporting from a browser-based tool, exporting one PNG master per asset and converting to WebP for the site keeps a lossless original around for when the design changes.