Images
Adding, replacing & fitting images
Photos, logos and AI artwork all land on the Canvas as placed images. Once one is there, you decide exactly how it sits inside its box — and you can swap the picture without rebuilding a thing.
An image lives in a frame
Every placed image is really two things layered together: the bitmap (the actual pixels) and the frame it sits in — a crop window plus a content scale. They're independent. You can move and resize the frame without touching the picture, or swap the picture without moving the frame. Keeping that split in mind makes everything below click into place.
Adding an image
There are three ways to get a bitmap onto the Canvas:
- Toolbar — click the image button (the photo icon; its tooltip reads Add image) and pick a file.
- Insert menu — choose Add image.
- Drag and drop — drag an image file straight from your desktop onto the Canvas.
Standard formats work — PNG, JPG and the like. The new image drops in at a default size, already selected and ready to position.
Selecting & moving
Click an image to select it; drag anywhere on it to move it. The corner handles scale the frame — this is Figma-style, so dragging a handle resizes the whole image rather than re-cropping it. (Cropping is a separate mode, covered in Cropping & image frames.)
Need a mirror image? Use Flip H and Flip V in Properties to flip the content horizontally or vertically without redrawing anything.
Replacing an image
To swap the picture but keep the layout, select the image and, in Properties, click Replace (the photo icon) to choose a new file. The new bitmap drops into the same frame and re-fits automatically — its position, size, crop window and corner radius are all preserved. This is the tidy way to update a product shot or trade one logo for another without nudging everything around it.
Right beside it is Replace with AI, which regenerates the selected image from a text prompt into that same frame. See Generating & replacing images with AI for the full workflow.
Image fit
How a bitmap sits inside its frame is set by the Image fit control in Properties — a segmented row of four buttons. Fill, Fit and Stretch are persistent modes: the one you pick stays highlighted and keeps applying as you resize. Original size shows as 1:1 and is a one-shot command — it does its thing once and never stays highlighted.
| Mode | What it does |
|---|---|
| Fill | Cover-scales the picture to fill the whole frame; anything past the edges is cropped off. Like CSS object-fit: cover. |
| Fit | Shows the entire bitmap at the largest scale that fits, and snaps the frame to the image's own aspect ratio (a single image can't letterbox). |
| Stretch | Distorts the picture to fill the frame exactly, resetting any crop. Use sparingly — it changes proportions. |
| Original size (1:1) | Drops the content in at its true source pixels while keeping the frame window. Handy for checking real pixel dimensions. |
Which mode when
- Fill — the default choice for backgrounds and photos that must cover a whole area edge to edge. You lose a little at the margins, but there are no gaps.
- Fit — when the whole subject matters and nothing can be clipped: a logo, a product cutout, an icon. The frame reshapes to the image so nothing is cropped.
- Stretch — rarely. It's the only mode that changes proportions, which usually looks wrong on anything recognisable. Reach for it only when you genuinely want to distort.
- Original size — a quick way to see a picture at its true resolution. If it looks tiny at 1:1, it won't have many pixels to spare when enlarged — worth knowing before print.
Tip: Fill and Stretch both fill the frame completely, but only Stretch distorts. If a photo looks subtly squashed, you're probably in Stretch — switch to Fill.
That last point matters for print. Enlarging an image lowers its effective resolution, and in a CMYK document the editor flags anything that would print soft — see Image resolution & the print check.
What's next
- Cropping & image frames — crop to just the part you want, and add a background, border or rounded corners.
- Image resolution & the print check — make sure every image is sharp enough to print.
New to the workspace? The tour of the workspace shows where the toolbar, Properties and menus live.