Images and figures

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

Hinode supports responsive images out-of-the-box. Although you can include images in your content natively with Markdown, these images are not optimized for your viewport or screen. Hinode uses Hugo’s powerful image processing  to preprocess images on the server side. By taking advantage of so-called image sets  , the client’s browser can decide which image to download whilst reducing the download size.

Images  

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

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" >}}

Figures  

Similar to the images support, 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" >}}