---
title: "Image extension"
description: "Use the Image extension in Tiptap to render the HTML tag for adding images to your documents. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/image"
---

# Image extension

Use the Image extension in Tiptap to render the HTML tag for adding images to your documents. Learn more in our docs!

Use this extension to render `<img>` HTML tags. By default, those images are blocks. If you want to render images in line with text set the `inline` option to `true`.

> **No Server Functionality:**
>
> This extension is only responsible for displaying images. It doesn’t upload images to your server,
> for that you can integrate the [FileHandler
> extension](https://tiptap.dev/docs/editor/extensions/functionality/filehandler.md)

> **Interactive demo:** [Image](https://embed.tiptap.dev/preview/Nodes/Image)

## Install

```bash
npm install @tiptap/extension-image
```

## Settings

### inline

Renders the image node inline, for example in a paragraph tag: `<p><img src="spacer.gif"></p>`. By default images are on the same level as paragraphs.

It totally depends on what kind of editing experience you’d like to have, but can be useful if you (for example) migrate from Quill to Tiptap.

Default: `false`

```js
Image.configure({
  inline: true,
})
```

### resize

Options for resizable images. If defined the node will be wrapped in a [resizable node view](https://tiptap.dev/docs/editor/api/resizable-nodeviews.md) making it possible to resize the image via resize handles.

Default: `undefined`

```js
Image.configure({
  resize: {
    enabled: true,
    directions: ['top', 'bottom', 'left', 'right'], // can be any direction or diagonal combination
    minWidth: 50,
    minHeight: 50,
    alwaysPreserveAspectRatio: true,
  }
})
```

### allowBase64

Allow images to be parsed as base64 strings `<img src="data:image/jpg;base64...">`.

Default: `false`

```js
Image.configure({
  allowBase64: true,
})
```

### HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

```js
Image.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

## Commands

### setImage()

Makes the current node an image.

```js
editor.commands.setImage({ src: 'https://example.com/foobar.png' })
editor.commands.setImage({
  src: 'https://example.com/foobar.png',
  alt: 'A boring example image',
  title: 'An example',
})
```

## Examples

### Resizable Images

> **Interactive demo:** [ResizableImages](https://embed.tiptap.dev/preview/Examples/ResizableImages)

## Source code

[packages/extension-image/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/)