# Images and figures

Use the image shortcode to display a responsive image with optional caption.

> [!IMPORTANT]
> Hinode uses render hooks since release Added in v0.26.0
 to parse markdown images. Be sure to set [parser.wrapStandAloneImageWithinParagraph](https://gohugo.io/getting-started/configuration-markup/#parserwrapstandaloneimagewithinparagraph) to `false` to correctly render images and figures.

Hinode uses Hugo's [image processing](https://gohugo.io/content-management/image-processing) to preprocess responsive images on the server side. By taking advantage of so-called [image sets](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images), the client's browser can decide which image to download whilst reducing the download size. You also utilize external image processors, see [](/docs/configuration/digital-asset-managers)
 for more details.

## Images

As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio. The [image shortcode documentation](image) provides more details.

> [!IMPORTANT]
> Be sure to store your local images in the `assets` folder to take advantage of the image processing features. Images stored in the `static` folder are not processed.

```markdown
{{< image src="img/flowers.jpg" ratio="21x9" class="rounded" >}}
```

You can also reference remote images by specifying an URL. Hinode downloads the image to the server and stores the processed images in the local `resources` folder (during debugging) or `public` folder (during build).

```markdown
{{< image src="https://picsum.photos/id/56/2880/1920" ratio="1x1" class="rounded" wrapper="mx-auto w-25" >}}
```

You can also use native Markdown to include an image since release Added in v0.26.0
.

```markdown
![Flowers](/img/flowers.jpg)
{class="rounded col-6 col-md-3" ratio="4x3" portrait=true wrapper="text-center"}
```

## Figures

Similar to the [images support](#images), you can add a caption to display below the image. Add the argument `caption` to include a figure caption.

```markdown
{{< image src="img/coffee.jpg" ratio="21x9" caption="Figure caption" class="rounded" >}}
```

You can also use native Markdown to include a figure since release Added in v0.26.0
.

```markdown
![Flowers](/img/flowers.jpg "Figure caption")
{class="rounded col-6 col-md-3" ratio="4x3" portrait=true wrapper="text-center"}
```