Start
In the docs

The basics

Image

An image is a box that shows a photo. You decide the box's size and shape; the photo is cut to fit it.

A serum bottle
A bar of soap
A jar of cream
The same kind of image, three shapes: the image box's size and corners decide how the photo is cut.

How to make one

  1. Press I, or choose Image in the toolbar.
  2. Drag on the page to set its size. A window opens to choose a photo from your computer.
  3. Or close that window, and pick one of your images under Image in the Design tab.

Fill or Fit

A photo is rarely the exact shape of its box. Fill crops it to cover the box; Fit shows all of it.

Photo
A sourdough loaf
Fill: the photo covers the whole image box, and the edges that don't fit are cropped.

Put an image set to Fill beside a box of words, in a row, and they share the width:

A stoneware vase on a shelf
Thrown by hand, fired twice
Every vase starts as a lump of local clay and leaves the studio three weeks later.
See the collection
An image set to Fill beside a stack of words, in a row. On phones the row wraps and the words move under the photo.

Design

Image
Pick from your images, upload a new one, or paste an image address.
Fill, Fit
Crop to cover the box, or show the whole photo.
Description, for screen readers
A few words saying what the photo shows, for people who can't see it. Search engines read it too.
Size
Fixed, Hug or Fill, the same as any box.
Corners, Border, Shadow
Round the corners all the way for a circle; a border frames it.

Behaviour

Shows
Inside a component, an image can show a product's photo instead of the one you picked. A list then fills it in for each product.
On hover, show
A second photo when the pointer is over it: the back of a shirt, or the product in use.
When clicked
Follow a link, open a pop-up, and more.