SynthMock
Choose the format for the destination. Transparency, fine interface details and website delivery have different needs, so keep a useful original and inspect the file you actually publish.
Try it in SynthMock
Start with a Duo scene.
Use a reusable template as your starting point, then apply the choices in this article.
A paid plan is required to use templates and export.
Start with transparency and destination
Use PNG when you need a lossless still or transparent compositing. JPEG is useful for an opaque finished scene when broad compatibility matters. WebP is an option for modern web delivery and can preserve transparency.
A format name does not guarantee the smallest file or the clearest result for every image. Fine text, gradients and reflected detail stress compression differently. Compare actual exports using the same dimensions and scene.
| Format | Useful when | Check |
|---|---|---|
| PNG | Lossless still or alpha compositing | File size and transparent edges |
| JPEG | Opaque scene with broad compatibility | Fine text and gradient artifacts |
| WebP | Web delivery or alpha-capable still | Destination support and actual appearance |
Compare like-for-like files
Set the final Fold, camera and lighting before comparing formats. If the image changes between exports, you will be judging the scene instead of the encoding.
- Open Export, choose Image and set a fixed size.
- Export the formats relevant to your destination using paid access.
- Compare the same small text, diagonal screen edge and smooth background gradient in each file.
- Check transparent candidates on a colored background.
- Use the result that meets the visual and delivery requirements, and retain a suitable original.
Keep format changes separate from source quality
If the app artwork is already pixelated, changing JPEG to PNG will preserve those pixels rather than invent detail. Return to the original design and upload a cleaner source. Likewise, exporting a tiny device inside a very large canvas does not make its interface readable in a small card.
For a website, prepare a delivery size that matches how the image is displayed. Keep higher-resolution originals available for larger placements, but avoid making every small thumbnail load the largest file. Verify the image in its destination after upload, since another platform may re-encode it.
Final pass
Before you call it finished
- The format supports the needed transparency.
- Comparable exports were inspected at the same dimensions.
- The destination version retains readable UI and smooth gradients.
Make the next version yours.
Explore Duo templates ↗