Transparent background or flat background, what differs

The export finishes one of two ways

Export starts by baking the stage on screen into a canvas. From there it splits. Exporting transparent hides the background layer and turns the baked result straight into a file. Exporting opaque makes a new canvas of the same size, fills it with the chosen color, lays the baked result on top, and turns that into a file.

There is no third option between the two. No half transparent background, and no compromise path that keeps alpha over a color, exists in the code.

The format decides first

JPG cannot carry transparency at all. Picking JPG disables the transparency checkbox. It is not only the display that is blocked: the value used at export time is computed to be true only when the format is not JPG. Even with the box still ticked, the result is opaque.

Turning transparency on drops the whole background

A transparent export is not post processing that keeps only the alpha channel. It hides the background layer. So a solid color, a gradient, or a photo you set as the background, anything on the background layer, disappears from the result. Only the devices, the screenshots, and the finishing remain.

Here is the distinction promised earlier. Setting the background type in the background panel to transparent means the background is not drawn in the editor either. The transparent background in the export panel hides the background layer only at the moment of export. The two switches know nothing about each other, so the result depends on the combination.

The second row is the easy one to misread. The flat color does not replace the background. It is one more layer laid underneath. When the background covers the canvas, the flat color is not visible. It shows in the result when the background is empty or does not cover the whole canvas.

How the flat background is made

A new canvas the same size as the baked result is created, the whole of it is painted with the chosen color, and the baked result goes on top. The default color is white, and the color control appears only when the transparency box is off.

This step is what stops JPG turning transparent areas black. Filling the places that hold alpha with a color beforehand means the color survives even though the format throws the alpha away.

Quality applies to JPG and WebP only

The quality slider appears only when the format is JPG or WebP. The default is 0.92, the range runs from 0.5 to 1, and the step is 0.01. On screen it is rounded and shown as a percentage. PNG is lossless and does not use the value.

The quality value is handed straight to the function that bakes the file, along with the format. The browser's encoder is what interprets it, so the same value can produce different file sizes in different browsers.

WebP needs the browser to be able to write it

The app checks for itself whether it can export WebP. It makes a 1 pixel canvas, asks for WebP out of it, and looks at whether the resulting string starts with the WebP form. The check runs once and the answer is remembered.

On a browser without support the WebP button is disabled, and an export attempted anyway ends with a message that it is not supported. If you need transparency in that situation, use PNG.

Which one to pick

What both paths share

Whichever way you export, the editing tool layers are always hidden. Selection handles and alignment guides stay out of the result. The hidden layers are put back at the end whether the export succeeded or failed.

If the step that bakes the file returns an empty result, it retries once, and if it is still empty it ends with a message to lower the scale. That retry happens in this one place only.

Copying to the clipboard puts the file that was made onto the clipboard in the same format. Change the format or the transparency and what gets copied changes with it. On a browser without clipboard support the button is disabled and you are pointed to the download.

In short

• A transparent export hides the background layer, so a background image goes with it.
• A flat export lays down a color and puts the result on top.
• JPG is always flat because of the format.
• Transparency in the background panel and transparency in the export panel are different switches.
• The quality value applies to JPG and WebP only, and the default is 0.92.
• WebP opens up only when the browser can encode it.

Every statement on this page was checked against the export implementation code. The evidence table at the bottom names the file and the value behind each sentence.