Export PNG & JPG - Azyrom Help

Export your designs as PNG or JPG images for use in websites, apps, presentations, and print. Choose the right format and settings for your needs.

Quick Export

Select elements to export

Select one or more elements, frames, or the entire canvas.

Open export dialog

Press ⌘/Ctrl + Shift + E or File → Export.

Choose format and settings

Select PNG or JPG, adjust scale and quality settings.

Export

Click Export and choose a save location.

PNG vs JPG

PNG	JPG
Supports transparency	No transparency (white background)
Lossless compression	Lossy compression
Larger file size	Smaller file size
Best for graphics, icons, UI	Best for photos
Sharp edges preserved	May show compression artifacts

When to Use Each

PNG: Icons, logos, UI elements, anything with transparency or sharp edges.
JPG: Photos, complex images with many colors, when file size matters.

Export Scale

Export at different scales for different use cases:

1x - Standard resolution (1 design pixel = 1 exported pixel)
2x - Retina/HiDPI displays (doubles dimensions)
3x - High-density mobile displays
4x - Extra high resolution
Custom - Enter any scale factor or specific dimensions

Multi-Scale Export

Export multiple scales at once:

In the export panel, click "Add export"
Add 1x, 2x, 3x variants
Each exports with a suffix (e.g., icon.png, icon@2x.png, icon@3x.png)

PNG Options

Transparency

Include background - Adds canvas background to export
Transparent background - Preserves alpha channel

Interlacing

Interlaced PNGs load progressively in browsers (blurry → sharp). Slightly larger file size but better perceived loading speed.

JPG Options

Quality

Quality setting affects file size and image fidelity:

100% - Highest quality, largest file
80-90% - Good balance (recommended)
60-70% - Smaller files, visible artifacts
Below 60% - Significant quality loss

Background Color

JPG doesn't support transparency. Choose a background color for transparent areas:

White (default)
Black
Custom color

Pro Tip

For web use, 80% JPG quality is usually indistinguishable from 100% but can be 50-70% smaller in file size. Start at 80% and only increase if you notice quality issues.

Export Selection vs Frame

Exporting Selection

When you select specific elements:

Only selected elements are exported
Export bounds match the selection bounding box
Transparent areas outside elements (PNG only)

Exporting Frame

When you export a frame:

Frame bounds define the export area
Content outside frame bounds is clipped
Frame fill becomes background

Batch Export

Export multiple elements at once:

Select multiple frames or elements
Open export dialog
Each selection exports as a separate file
Files are named based on layer names

Export Settings in Properties

Configure export settings directly on frames:

Select a frame
In Properties Panel, find Export section
Add export settings (format, scale)
These settings are saved with the frame
Use File → Export All to export all configured frames