Figure

{{< figure src="/images/uploads/test.jpg" alt="" legend="Lorem ipsum" credit="Unsplash" >}}

<figure>
  <picture>
    <source srcset="" type="image/webp" media="(min-width: 577px)" />
    <source srcset="" type="image/webp" media="(max-width: 576px)" />
    <source srcset="" type="image/jpg" media="(max-width: 576px)" />
    <img src="" alt="" width="" loading="lazy" height="" decoding="async" />
  </picture>
  <figcaption>
    <p>Lorem ipsum</p>
    <p class="credit">Unsplash</p>
  </figcaption>
</figure>

{{< figure src="/images/uploads/admin-home.png" alt="" legend="Screenshot" screenshot=true >}}

<div class="screenshot">
  <span></span>
  <figure>
    <picture>
      <source srcset="" type="image/webp" media="(min-width: 577px)" />
      <source srcset="" type="image/webp" media="(max-width: 576px)" />
      <source srcset="" type="image/jpg" media="(max-width: 576px)" />
      <img src="" alt="" width="" loading="lazy" height="" decoding="async" />
    </picture>
    <figcaption>
      <p>Screenshot</p>
    </figcaption>
  </figure>
</div>

src: ""
alt: ""
legend: ""
credit: "" // Markdown accept
screenshot: false // Set true you want add fake browser around your picture (and linear filter compression)