Add a local or a remote image with Markdown, or use the image partial in a template. Images are lazyloaded, blurred up, and responsive.

See also the Markdown Guide: Images


  • Render hook: ./layouts/_default/_markup/render-image.html.
  • Image partial: ./layouts/partials/content/image.html.
  • An <img> element is generated for small images, a <figure> element for large images.


Set smallLimit, defaultImage, and fillImage in ./config/_default/params.toml:

smallLimit = "320"

### Image partial
defaultImage = "default-image.png" # put in `./assets/images/`
fillImage = "1280x720 Center" # normalize image size

See also: Images


Image in page bundle

{{< figure link="" src="security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg" alt="Describe your image" caption="For a figure caption can be different than alt text" >}}
Describe your image
For a figure caption can be different than alt text

Add a local image

Place your local images in a page bundle:

├── blog/
│   ├── say-hello-to-doks/
│   │   ├──
│   │   └── say-hello-to-doks.png
│   └──

See also the Hugo docs: Page Bundles


![Green Sea Turtle Hatchling by Hannah Le Leu](green-sea-turtle-hatchling.webp "A green sea turtle hatchling cautiously surfaces for air, to a sky full of hungry birds.")

Will be processed into:

Green Sea Turtle Hatchling by Hannah Le Leu

Add a remote image


![Happy Dance by Neil Sanders](

Will be processed into:

Happy Dance by Neil Sanders

Use the image partial


Add {{ partial "content/image.html" . }} to ./layouts/blog/single.html:

{{ define "main" }}
<div class="row justify-content-center">
  <div class="col-lg-7">
      <h1>{{ .Title }}</h1>
      {{ partial "content/image.html" . }}
      {{ .Content }}
{{ end }}

Edit this page on GitHub