# Images

An image in Pixel is a design: a canvas with elements on it, the conditions
that decide where it is used, and a name. Pixel renders a file from it for each
post that needs one.

## The image library

**Images** lists every design with its name, canvas size and number of
elements, newest first, 25 to a page, with a search field; the search and the
page are part of the address (`q` and `paged`), and a search that finds
nothing says so in the table. Before the first image exists
it shows a short explanation with **Create image** instead. From there you
can:

- **Create image**: give the image a name. It starts as a 1200 × 630 white
  canvas with one text element.
- **Edit** an image, which opens it in the editor.
- **Delete** an image, which asks first and then removes the design and its
  conditions; it cannot be undone.

## The editor

The editor's toolbar switches between three views, and beside them
**Delete image** removes the image after asking first; it cannot be undone.

### Design

The design view has three columns: **Structure**, the list of elements on the
left; the canvas in the middle; and the inspector for the selected element, or
for the canvas when nothing is selected, on the right.

There are three kinds of element:

- **Text**, with its font, size, weight, style, line height, letter spacing,
  alignment, transform and colour. See [How text works](/docs/pixel/info/how-text-works.md).
- **Image**, whose source is a URL typed in, an image chosen from the WordPress
  media library, or an image from [dynamic data](/docs/pixel/dynamic-data.md) such
  as the post's featured image. It fits its box by covering or containing. A
  source is an `http` or `https` address, or a path to a file of the site such
  as `/wp-content/uploads/…`, and the file must be a PNG, JPEG, GIF, BMP, WebP
  or self-contained SVG image; any other source is left empty.
- **Section**, a box for backgrounds, borders and rounded corners.

Every element has a position, a size, padding, opacity, a background (a solid
colour or a gradient) and a border. Elements can be duplicated, locked against
accidental moves, and deleted; changes can be undone and redone. The canvas
settings hold its size, its background and the safe margin. How the canvas
behaves while you edit - guides, snapping, the Shift step - is set per user in
[Canvas](/docs/pixel/settings/options.md#canvas).

### Conditions

Where the image is used: as the Open Graph or Twitter Card image, as the
featured image, or in the block editor sidebar, and for which pages. See
[Conditions](/docs/pixel/locations.md).

### Templates

A gallery of 259 starter designs, filterable by format and by tags. **Use
template** replaces the canvas settings and elements of the open image with the
template's; the image keeps its name and its conditions. The change stays
unsaved until you save.

## Preview data and previewing

The editor shows dynamic data from a post you pick in its preview data list,
which searches every post type as you type and keeps the post saved with the
design. **Preview image** renders the current, unsaved
design on the server for that post, exactly as Pixel will render it, and is
the way to check the final result; see
[Rendering differences](/docs/pixel/info/rendering-differences.md).

## Saving

Changes stay unsaved until you press **Save**, which replaces the stored
design and confirms with "Image saved."; images already rendered from the old
design are rendered again the next time they are needed. **Discard**, beside
Save, returns the editor to the saved design. Both are available only while
something has changed.

Unsaved changes stay with the workspace tab: you can open another screen or
another image and come back to them, and the browser asks before a reload or
a closed window would lose them.

## The image ID

PHP functions, the shortcode and WP-CLI refer to an image by its ID: the number
at the end of the editor's address (`…/images/123`), also listed by
`wp sleek pixel image list`.