Figure

Load images progressively with blurry placeholders.
HTML attributes:
alt,
class,
src
Custom attributes:
attr,
attrlink,
caption,
link,
linktarget,
lqipsrc,
title

With progressive image placeholder:

{{< figure
  alt="Artistic map"
  src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
  lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
  title="Map of Bali in Watercolor"
  attr="Stamen Design"
  attrlink="https://maps.stamen.com/"
>}}
Artistic map
Map of Bali in Watercolor
Stamen Design

Above as a Snippet used in a Custom Layout:

{{ partial "components/figure.html" (dict "alt" "Artistic map" "src" "/images/watercolor_pTIyYTqAlF8_w936h455.jpeg" "lqipsrc" "/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg" "title" "Map of Bali in Watercolor" "attr" "Stamen Design" "attrlink" "https://maps.stamen.com/") }}

See Figures in Hugo for Hugo-specific implementation.