# Images

YouDesign Models lets you drop images straight onto a board — screenshots, photos, icons, diagrams — and crop them in place. Images are first-class canvas elements: you can resize, delete, layer, and lock them like any other shape.

## Adding Images

Three ways to add an image:

### Upload from File

1. Click the **Upload** icon in the editor toolbar.
2. Pick a file from the system file browser.
3. The image appears on the canvas where you can drag it into position.

### Paste from Clipboard

Copy an image anywhere (screenshot, web page, email) and press **Ctrl+V** / **Cmd+V** while focused on the canvas. The image is pasted immediately.

### Drag & Drop from Finder / Explorer

Drag an image file from your operating system's file browser (macOS Finder, Windows Explorer) directly onto the canvas and drop it where you want it placed.

## Supported Formats

* **PNG**
* **JPG** / **JPEG**
* **SVG**

Other formats aren't supported in v26. Your administrator may further restrict the allowed types via a ServiceNow system property.

## Resizing

Images resize like any other shape:

1. Select the image.
2. Hover near its edge or corner for the resize indicator.
3. Drag to resize — corners resize proportionally, edges resize along one axis.

## Cropping

Cropping is done in place — no round-trip to an external editor:

1. Select the image.
2. Click the **Crop image** icon on the toolbar.
3. A cropping overlay appears with handles around the image. Visual guides help you align the crop.
4. Drag the handles to set the area you want to keep.
5. Click outside the image (or click elsewhere on the canvas) to finalize.

> **Tip:** Cropping produces a new version of the image. The original dimensions can't be recovered once you commit the crop — make a duplicate first if you think you'll want the uncropped version later.

## Replacing an Image

To change an image while keeping its canvas position, size, and links:

* **Crop to re-upload** — the cropping tool writes a new image URL into the existing shape. You can effectively swap content by cropping onto a fresh upload.
* **Manual swap** — delete the old image and paste or upload the new one in the same spot.

> **Note:** A single-click "Replace" button isn't available in v26 — replacement goes through upload + delete.

## Deleting an Image

Images are deleted the same way as any shape:

* Select and press **Delete** or **Backspace**
* Or use the **Delete** option from the toolbar menu

## Locking & Stacking

Images support the same lock and stacking controls as other shapes:

* **Lock** to prevent accidental moves or edits (toolbar → Lock).
* **Bring to Front** / **Send to Back** to control which elements cover which.

See [Shapes](/models/work-in-the-app/editor/shapes.md) for the full lock and stacking behavior.

## Limits & Gotchas

* **No URL import** — you can't link to an external image URL. The image has to be uploaded, pasted, or dragged from disk.
* **No ServiceNow attachment picker** — images aren't pulled from attachment tables; they're stored with the board.
* **No rotation / filters / effects beyond crop** — images are cropped and resized, but not color-adjusted or rotated from the image toolbar.
* **Large images can slow scrolling** — consider cropping before upload if the source is very large (e.g., a high-DPI screenshot of a full-screen design).

## Related

* [Shapes](/models/work-in-the-app/editor/shapes.md) — the base behavior images inherit (resize, lock, stack)
* [Export](/models/work-in-the-app/editor/export.md) — board exports include images at the current size
* [AI Assistant: Attaching Images](/models/work-in-the-app/ai/images.md) — use an image as AI input


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ins-pi.com/models/work-in-the-app/editor/images.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.