This blog converts images in Markdown to be wrapped inside a figure tag

Examples

It supports Astro image optimization, you can also add image using an image link from other website.

![Example image inside a figure](../../assets/images/3.jpg)

Rendered:

The image will be wrapped in a <figure> tag and a <figcaption> will be added based on the alt text, or you can add a custom caption by including a title.

![Example image inside a figure](../../assets/images/3.jpg "This is custom caption, different from the image alt. Image by © Unknown")

Rendered:

Rendered HTML:

<figure>
  <img src="/_astso/3.XXX_xxx.webp" alt="Example image inside a figure" title="This is custom caption, different from the image alt. Image by © Unknown" width="1200" height="630" loading="lazy" decoding="async">
  <figcaption>This is custom caption, different from the image alt. Image by © Unknown<figcaption>
</figure>