figure

You can add images to your .md pages by using the figure shortcode. See the figure shortcode reference page for all available arguments.

Examples

Page resource

{{< figure
  process="fill 2100x900"
  lqip="21x webp q20"
  loading="eager"
  fetchpriority="high" 
  src="vincent-van-zalinge-e5VzJJDODbQ-unsplash.jpg"
  alt="A yellow and black bird sitting on top of a body of water"
  caption="A yellow and black bird sitting on top of a body of water. Photo by Vincent van Zalinge"
>}}
A yellow and black bird sitting on top of a body of water
A yellow and black bird sitting on top of a body of water. Photo by Vincent van Zalinge

Rendered HTML

<figure>
  <img
    srcset="
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_5a17d993911d39eab4c7b885a293418e.webp 480w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_23d19ec40f792d3361d1be135008267b.webp 576w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_f23ec1d631a7d8fac2595529323fbc08.webp 768w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_a15aa8ceb8573d3fb48d8fa243d07c42.webp 1025w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_a18fd0d22800f6dfddea00bec2281c63.webp 1200w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_e3a707aa6a8c6a0d531f2d92a370fcd1.webp 1440w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_13ff401046b3665589186c8927831394.webp 2100w
    "
    data-srcset="
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_5a17d993911d39eab4c7b885a293418e.webp 480w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_23d19ec40f792d3361d1be135008267b.webp 576w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_f23ec1d631a7d8fac2595529323fbc08.webp 768w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_a15aa8ceb8573d3fb48d8fa243d07c42.webp 1025w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_a18fd0d22800f6dfddea00bec2281c63.webp 1200w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_e3a707aa6a8c6a0d531f2d92a370fcd1.webp 1440w,
      /docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_13ff401046b3665589186c8927831394.webp 2100w
    "
    data-sizes="auto"
    src="/docs/shortcodes/figure/vincent-van-zalinge-e5VzJJDODbQ-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_162847_d59446c4f99a4c9fbb5339fae96cf2c7.jpg"
    width="2100"
    height="900"
    decoding="async"
    fetchpriority="high"
    loading="eager"
    alt="A yellow and black bird sitting on top of a body of water"
    class="blur-up lazyautosizes ls-is-cached lazyloaded"
    sizes="642px"
  >
  <figcaption>
    A yellow and black bird sitting on top of a body of water. Photo by Vincent van Zalinge
  </figcaption>
</figure>

Global resource

{{< figure
  process="fill 1600x900"
  src="images/vincent-van-zalinge-XIp7Wna0ua0-unsplash.jpg"
  alt="A small bird perched on top of a tree branch"
  caption="A small bird perched on top of a tree branch. Photo by Vincent van Zalinge"
>}}
A small bird perched on top of a tree branch
A small bird perched on top of a tree branch. Photo by Vincent van Zalinge

Remote resource

{{< figure
  process="fill 1600x900"
  src="images/vincent-van-zalinge-XIp7Wna0ua0-unsplash.jpg"
  alt="A small bird perched on top of a pine tree"
  caption="A small bird perched on top of a pine tree. Photo by Vincent van Zalinge"
>}}
A small bird perched on top of a pine tree
A small bird perched on top of a pine tree. Photo by Vincent van Zalinge