---
title: Edit Image
description: Resize, crop, rotate, convert, compress or annotate an image in the browser
---

Resize, crop, rotate, convert, compress or annotate an image, right in the browser.

## What it does

Edit Image takes the image attached to the incoming item (under **Binary Field**, `data` by default), applies **one** edit, and puts the edited image back in the same place. Each node does one operation; chain several Edit Image nodes for several edits.

* **Resize** scales to **Width (px)** and/or **Height (px)**. With **Keep aspect ratio** on (the default), giving one size works out the other, and giving both fits the image inside that box without distortion. Turn it off to stretch to exactly both sizes.
* **Crop** cuts out the rectangle at **X**, **Y** with size **Width** x **Height**. The rectangle must fit fully inside the image.
* **Rotate** turns the image clockwise by **Degrees**. 90, 180 and 270 keep the picture exact; other angles get a canvas large enough to hold the turned image.
* **Convert format / compress** saves the image as PNG, JPEG or WebP. **Quality** (0 to 1) applies to JPEG and WebP only: lower means a smaller file. PNG ignores it.
* **Annotate (text or box)** draws on the image: **Text** at **X**, **Y** in the chosen **Color** and **Font**, or a box outline at **X**, **Y** of size **Width** x **Height** with **Line width**.

When converting, the file keeps its name but gets the new extension (`shot.png` becomes `shot.jpg`). Other operations keep the source format; an image that is not PNG, JPEG or WebP is saved as PNG.

## When to use it

* Crop a [Screenshot Page](/nodes/extension/screenshotpage/) capture to the part that matters before you share it.
* Shrink or compress an image before uploading it, for example to JPEG at quality `0.7`.
* Add a label or a highlight box to a screenshot for a bug report.
* Rotate a photo that arrived sideways.

## Inputs and settings

* Only the settings for the chosen **Operation** matter; the others are ignored.
* Positions are in pixels from the top-left corner. Empty **X** or **Y** means `0`. For text, **Y** is the top of the letters.
* **Color** takes any web color: `#ff0000`, `red` or `rgba(255,0,0,0.5)`. **Font** takes a size and a family, such as `bold 24px sans-serif`.

## Outputs

Each output item has these fields:

```json title="Shape of an output item"
{
  "$binary": {}
}
```

The item comes out with all its other fields unchanged and the edited image under the same **Binary Field**. Nodes that take a file, such as a Slack or Google Drive upload, pick it up through their **Binary source** setting (`data` by default).

## Dependencies and credentials

None. This node needs no connection and has no slots for other nodes.

## Example workflow

1. [Screenshot Page](/nodes/extension/screenshotpage/) captures the current tab as a PNG.
2. Edit Image with **Operation** *Crop*, **X** `0`, **Y** `0`, **Width** `1200`, **Height** `600` keeps the top of the page.
3. A second Edit Image with **Operation** *Convert format / compress*, **Format** *JPEG* and **Quality (0-1)** `0.7` makes the file smaller.
4. [Slack](/nodes/builtin/integration/slack/) with **File → Upload** posts the image to a channel.

## Common issues

* **"No image found on $binary\["data"]."** The incoming item has no image under **Binary Field**. Connect a node that produces one, such as Screenshot Page, an [Http Request](/nodes/builtin/core/http-request/) that downloads an image, or [Convert to File](/nodes/builtin/datatransformation/converttofile/).
* **"Crop rectangle is out of bounds: … does not fit inside the … image."** The rectangle runs past the edge. Reduce **X**, **Y**, **Width** or **Height**. The message shows the image's real size.
* **"Resize needs a width or a height (or both)."**, **"Crop needs a width (w) and a height (h)."** or **"Text annotation needs some text to draw."** Fill in the fields the chosen operation needs.
* **"This image cannot be edited because it is cross-origin and taints the canvas…"** The browser refuses to let the node read the image. Download the image with an Http Request node first and edit that copy.
* **Quality seems ignored.** It only affects JPEG and WebP. PNG never loses quality.

## Related nodes

* [Screenshot Page](/nodes/extension/screenshotpage/): capture a page to edit.
* [Convert to File](/nodes/builtin/datatransformation/converttofile/): turn a base64 image into a file Edit Image can read.
* [Http Request](/nodes/builtin/core/http-request/): download an image to edit.
* [Compression](/nodes/builtin/datatransformation/compression/): gzip other kinds of files.