Image Node

Image nodes display raster images (PNG, JPEG, GIF) on the canvas.

Image nodes keep only two sources: the original image and the latest processed image. The Properties panel preview always shows the original image, while the canvas shows the processed image when it exists, otherwise the original image.

Adding an Image

Drag and drop an image file onto the canvas to add it as an image node. PNG icons dropped from the icon library are also added as image nodes.

Image nodes added by dropping an image file are created at the image’s intrinsic size. You can then resize them freely from the Properties panel or by dragging corner handles.

Supported Formats

Format	Notes
PNG	Supports transparency (alpha channel)
JPEG	Suitable for photos and gradients
GIF	Animation is flattened to a still image on export

Difference from SVG Nodes

Image node: Holds raster images such as PNG, JPEG, GIF
SVG node: Created by dropping an external SVG file and stores the SVG document text
Builtin node: Created when dropping SVG icons from the icon library and stores an icon path instead of full SVG text

💡 Dropping an SVG file (without embedded document data) onto the canvas adds it as an SVG node. Dropping an SVG with embedded document data restores the entire document.

Cropping

Image and SVG nodes can be cropped from the "Crop" button in the Properties panel
The crop dialog shows the full image. Drag the crop frame to move it, and use the corner handles to adjust the range
The crop shape can be Rectangle or Circle. Circle is rendered as a circular mask on the canvas and in exports
The original data remains in the document after cropping, so you can use "Edit crop" to adjust the range again from the same source
For image nodes that already have background removal or magic eraser results, the crop dialog shows the processed image currently displayed on the canvas
The cropped content follows the node's preserveAspectRatio settings (mode, X align, and Y align) inside the box

Image Outline

When an image node is selected, the Properties panel lets you set the same background fill types as rect nodes (None / Solid / Linear gradient / Radial gradient / Checker / Dots)
Linear and radial gradients can be adjusted with the same on-canvas gradient handles as rect nodes, including radial position and radius
The background fill is drawn behind the image, so it appears through transparent PNG areas or cropped-image empty areas
For cropped images, the background fill is also constrained to the rectangular or circular crop clip boundary
When an image node is selected, the Properties panel lets you toggle the outline and set its color, width, and stroke style
If you turn the outline off and then on again, the previous outline width, color, and stroke style are preserved
Without cropping, the outline is drawn around the image box
For cropped images, the outline follows the rectangular or circular crop clip boundary

Background Removal

Select an image node and click "Remove background" in the Properties panel to run client-side background removal
If the model is not available yet, the first run downloads it from Hugging Face, and processing buttons show loading spinners while running
Even after background removal, click "Restore image" to return to the pre-removal image
Background removal always runs on the image currently shown on the canvas (it reprocesses the latest processed image when present)

Magic Eraser

Select one image node, then click "Magic eraser" in the Properties panel to enter lasso mode
Click on the canvas to create a red semi-transparent polygon, then click the start point again to confirm
Only the overlap between the polygon and the selected image node is removed
The Properties panel preview always shows the original (pre-processed) image
While in lasso mode, the button is highlighted and its label changes to "Finalize range"
While in lasso mode, click "Finalize range" to confirm the polygon and start processing
While in lasso mode, the target image cannot be moved or resized. Corner handles are hidden, and only the dashed selection outline remains visible
Once the range is finalized and processing starts, the active tool automatically returns to Select
If you press another toolbar tool button while in lasso mode, the lasso selection is canceled
The "Remove background" button is disabled while selecting a lasso region and while processing
While magic eraser is running on any image, the "Magic eraser" and "Remove background" buttons stay disabled even if you select another image
While processing, the label changes to "Running magic eraser", and only that button shows a spinner
On large images, processing prioritizes the selected region and avoids shrinking the entire image whenever possible
The "Remove background" spinner appears only during background-removal processing
The "Restore image" button never shows a spinner
If you click "Restore image" during processing, magic eraser is canceled and the first original image is restored
After processing, "Restore image" always returns to the first original image
After restoring, you can run magic eraser again on the same image as many times as needed