Images

An image shape shows a picture file on the board:

• Sources: a file you import, drop, or paste, a picture copied to the clipboard, a pasted link to an image online, or the icon library. It can also start as an empty canvas you paint yourself.
• The file: crop it, warp its corners, give it a stroke, filter it, or mask it, and the file stays whole for a download or a replacement.
• Pixels: paint them with Open image editor, and compress or upscale the file with Edit asset.

Adding an image

Brings an image file onto the board, by any of these ways:

• Operation, one of:
  • Choose Import file in the App menu and pick the file.
  • Drop an image file on the board.
  • Paste an image, or an image file, from the clipboard.
  • Paste a link to an image online, one that ends in an image extension such as .png.
  • Place an icon from the icon library.
• Needs: a JPEG, PNG, GIF, WebP, or SVG file of up to 10 MB.
• Result: the image at its own size, centered where you dropped it, with a placeholder in its place while the file loads.
  • The file is optimized on import: Optimize raster and Optimize SVG are on by default in the App settings, and pictures larger than Max image dimension, 5000 pixels by default, are scaled down to it.
• Tip: SVG files stay vector, so they are sharp at any zoom, and an animated GIF plays as an image until you convert it to a video. A photo's stored orientation isn't applied; if it comes in sideways, rotate the shape.

Creating an empty canvas

Starts a blank image to paint in the image editor, with no file to import.

Creating a canvas at the default size

• Operation:
  1. Pick Empty canvas in the board objects multi-button of the Tools panel.
  2. Click where the canvas should go.
• Result: a blank image of the default size, centered on the point you clicked, with the fill, stroke, and corner radius set in the Attributes panel while the tool was active. Its proportions are not locked, so it can be resized freely.
• Tip: open it with Open image editor to paint on it.

Creating a canvas at a custom size

• Operation:
  1. Pick Empty canvas in the board objects multi-button of the Tools panel.
  2. Drag on the board to draw the canvas. The Attributes panel shows its size while you drag.
• Result: a blank image filling the box you dragged, with the same defaults.

Cropping

Shows only part of the image, without losing the rest.

• Operation: double-click the image and drag the crop handles, or the picture inside them. Click on empty board to finish.
• Result: only the part inside the frame shows. The rest is kept, so the crop can be changed later, and the Cropping Info section gives the exact values.
• Tip: double-click an edge while cropping to reset the crop.

Warping

Lays the picture into a perspective by moving its four corners on their own.

• Operation: double-click the image, as for cropping, and drag a corner control point. Click on empty board to finish.
• Result: the picture is distorted so that corner follows the point, while the other three stay. The Warping Info section gives the corners as numbers.
• Tip: double-click a corner control point to reset that corner.

Sizing

Images keep their proportions while resizing, since Locked Ratio in Selection info starts on. Turn it off to stretch.

Sharing a picture between shapes

Shows the same picture file in several shapes, without copying it.

• Operation: select the images that should change, click the eyedropper of Source file in the Fill section, and click the shape whose picture you want.
• Needs: a source that is an image or a vector shape with an image fill.
• Result: the selected images show that picture and share its file. Each keeps its own crop, warp, stroke, and filters, keeps its width, and takes the picture's proportions.
• Tip: painting in the image editor or using Edit asset on one of them gives that shape its own copy, so the others stay as they were.

Attributes

A selected image shows these sections of the Attributes panel.

Selection info

The attributes that affect the shape as a whole.

• X: the horizontal position of the shape's pivot. Inside a frame, it's measured from the frame.
• Y: the vertical position of the pivot, also measured from the frame inside one. Which way it grows depends on the Y axis direction in the UI settings.
• W: the width of the shape.
• H: the height of the shape.
• Rotation: the angle around the pivot.
• Opacity: the transparency of the whole shape, stroke and fill included.
• Corners radius: rounds the corners of the shape.
• Locked Ratio: keeps the proportion between width and height while resizing.
• Proportional: scales the stroke width, dashes, hatching, and tiles along with the shape, so a resized shape keeps its look.

Stroke

A stroke drawn around the frame.

• Stroke style: the kind of line. The style decides which of the controls below appear.
  • No stroke: no line at all. Arrows don't offer it.
  • Solid stroke: a continuous line.
  • Dashed stroke: a line made of dashes.
• Stroke color: the color of the line.
• Stroke opacity: the transparency of the line alone.
• Stroke width: the thickness of the line.
• Stroke gap: the space between dashes.
• Stroke dash length: the length of each dash.

Fill

The picture is the fill of the shape. This section holds its file controls and the fill styles of a vector shape, which can replace the picture or show behind a transparent one. See Fill in Vector styles for those.

• Replace: swaps the picture for another image file from your device. The shape keeps its width and takes the new file's proportions.
• Paste from clipboard: replaces the picture with an image copied to the clipboard.
• Eyedropper of Source file: copies the file of another shape so both share it. See Sharing a picture between shapes.
• Info, a read-only list about the file:
  • Size: the file size.
  • Image layers size: for a picture painted in the image editor, the size of its layers.
  • File type: the file format.
  • Source file: the name of the file as it was added.
  • Resolution: the size in pixels.
  • URL: for a picture imported from a web address, that address.
  • Icon, Collection, Author, and License: for an icon placed from the icon library, where it came from, with Copy attribution to copy the credit line.

Cropping Info

The visible window of the picture while cropping.

• X: the distance from the left edge of the full media to the window.
• Y: the distance from the top edge of the full media to the window.
• W: the width of the window.
• H: the height of the window.

Warping Info

The position of the four corners when the picture is warped.

• Top left: the horizontal and vertical position of the top left corner.
• Top right: the horizontal and vertical position of the top right corner.
• Bottom left: the horizontal and vertical position of the bottom left corner.
• Bottom right: the horizontal and vertical position of the bottom right corner.

Filter

A chain of SVG filter primitives applied to how the shape is drawn. See Filters.

Mask

An image can be masked. See Masks.

Actions

Besides the actions every shape has, covered in What every shape shares, an image offers these in the Actions panel.

Open image editor

Opens the image for painting and retouching.

• Operation: click Open image editor.
• Needs: a JPEG, PNG, GIF, or WebP image. To paint on an SVG, turn it into a picture first with Edit asset.
• Result: the image opens for painting, erasing, selecting, and layering. See Image editor.

Edit asset

Changes the image file: its format, quality, and size, or enlarges it with AI.

• Operation: click Edit asset.
• Result: the Edit asset panel opens. There you can re-encode the file as JPEG, PNG, or WebP at a chosen quality, change its size in pixels, or upscale it with AI, and the result replaces the file. An SVG file is optimized as SVG or turned into a picture. See Media optimization.

Download source asset

Saves the image's current file to your device.

• Operation: click Download source asset.
• Needs: an image whose file has finished loading.
• Result: the file the shape uses downloads. With several shapes selected, every file downloads once, in selection order, whatever kinds of shapes they are; shapes without a file are skipped.

Convert SVG image to shapes

Turns an SVG image back into editable vector shapes.

• Operation: click Convert SVG image to shapes.
• Needs: an image whose file is an SVG. An SVG turned into a picture by Edit asset no longer qualifies.
• Result: the paths, geometry, polylines, text, and embedded images of the file, grouped when there are several, in the image's place and rotation. Gradients become gradient fills, and clip paths and masks become masks.
• Tip: large files are converted in batches, so the board stays responsive while the shapes appear. If the file uses features that cannot be converted, those parts are skipped and the rest is converted.

Convert GIF to video

Shows an animated GIF as a video, with playback controls, without changing the file.

• Operation: click Convert GIF to video.
• Needs: a single animated GIF image.
• Result: the same file shown as a video with playback controls. Size, crop, and styling are kept, and the video can be converted back to an image.

Convert to file card

Keeps the picture as a downloadable card instead of showing it.

• Operation: click Convert to file card.
• Result: a file card holding the same file. See Convert shapes to file cards.

Animating images

Images take the position, rotation, scale, resize, and opacity animations. See Transforming shapes and Revealing and hiding shapes.