# (image: …)

Embeds an image

****

- Source: <https://github.com/getkirby/kirby/tree/5.5.3/config/tags.php#L101>

****

## Attributes

In addition to the main `image` option, the tag supports the following attributes: `alt`, `caption`, `class`, `height`, `imgclass`, `link`, `linkclass`, `rel`, `srcset`, `target`, `title`, `width`

| Attribute | Description | Default |
|---- | ---- | ---- |
| alt | The alt attribute that is added to img element | `null` |
| caption | The caption | `null` |
| class | The class which is added to figure element | `null` |
| height | The height which is added to img element | `null` |
| imgclass | The class which is added to img element | `null` |
| linkclass | The class which is added to link element | `null` |
| rel | The rel attribute that is added to link element | `null` |
| srcset | The srcset attribute that is added to link element | `null` |
| target | The target attribute that is added to link element | `null` |
| title | The title attribute that is added to img element | `null` |
| width | The width which is added to img element | `null` |

### Attribute defaults from config

You can customize the defaults of this tag's attributes via the <a href="https://getkirby.com/docs/reference/system/options/kirbytext#image">`kirbytext.image` config option</a>.

## Examples

### Image of the current page

```kirbytext
(image: myawesomepicture.jpg)
```

### Image from the site files

To embed an image stored directly in the `/content` folder, use only its filename. The `/content` part of the path is assumed:

```kirbytext
(image: myawesomepicture.jpg)
```

Kirby first searches the current page for the file. If the page has a file with the same filename, it takes precedence over the site file.

### Image of another internal page

```kirbytext
(image: some/other/page/myawesomepicture.jpg)
```

### External image

```kirbytext
(image: http://example.com/images/myawesomepicture.jpg)
```

### Image with alternative text

```kirbytext
(image: myawesomepicture.jpg alt: This is an awesome picture)
```

### Image with a caption

```kirbytext
(image: myawesomepicture.jpg caption: I took this image in the park)
```

### Image with a `title` attribute

```kirbytext
(image: myawesomepicture.jpg title: I took this image in the park)
```

### Image with a link

```kirbytext
(image: myawesomepicture.jpg link: http://flickr.com)
```

### Image with a link to itself

```kirbytext
(image: myawesomepicture.jpg link: self)
```

### Image with a link to an internal page

```kirbytext
(image: myawesomepicture.jpg link: some/page)
```

### Image with a link to an internal file

```kirbytext
(image: myawesomepicture.jpg link: some/page/somedocument.pdf)
```

### Image with a link and a specified target

```kirbytext
(image: myawesomepicture.jpg link: http://flickr.com target: _blank)
```

### Image with a link and a `rel` attribute

```kirbytext
(image: myphoto.jpg link: http://mywebsite.com rel: me)
```

### Image with a custom CSS class applied to the figure element

```kirbytext
(image: myawesomepicture.jpg class: floated)
```

### Image with a custom CSS class applied to the img element

```kirbytext
(image: myawesomepicture.jpg imgclass: myimage)
```

### Image with a custom CSS class applied to the link element

```kirbytext
(image: myawesomepicture.jpg link: http://flickr.com linkclass: myimage)
```

### Image with defined `width` and `height` attributes

```kirbytext
(image: myawesomepicture.jpg width: 500 height: 300)
```
Width and height can also be set to auto, which will automatically be replaced by the actual image dimensions.

```kirbytext
(image: cat.jpg width: auto height: auto)
```

This behaviour can also be set as global default for all image kirbytags in your config file.

```php
// config.php
'kirbytext' => [
	'image' => [
		'width' => 'auto',
		'height' => 'auto',
	]
];
```
### Image with `srcset` with absolut sizes

```kirbytext
(image: foo.jpg srcset: 200, 300)
```

### Image with `srcset` from a config srcset name

Use srcset defaults you defined in the <a href="https://getkirby.com/docs/reference/system/options/thumbs#srcsets">`thumbs` config option</a>:

```kirbytext
(image: foo.jpg srcset: album)
```