Automatically Wrap and Convert Markdown Images in a Figure Tag

Markdown images in this blog are automatically wrapped and converted in a <figure> tag. If a title is provided, a <figcaption> is also added. This improves both the visual presentation and accessibility of your images.

It supports Astro image optimization and allows you to use images from external sources as well.

Example

![Sunflower field under blue sky during daytime.](../../assets/images/sunflower.jpg)

Preview:

Rendered HTML:

<figure>
  <img src="/_astso/3.XXX_xxx.webp" alt="Sunflower field under blue sky during daytime." width="1200" height="630" loading="lazy" decoding="async">
</figure>

Adding a image caption

If you add a custom title to the image, it will generate a <figcaption> under the image. This provides a more detailed description than the alt text.

Example with caption:

![Sunflower field under blue sky during daytime.](../../assets/images/sunflower.jpg "A vibrant sunflower stands tall against a backdrop of soft blue sky dotted with delicate white clouds in Fowlerville, United States. Captured by Aaron Burden (@aaronburden) on Unsplash.")

Preview:

Rendered HTML:

<figure>
  <img src="/_astso/3.XXX_xxx.webp" alt="Sunflower field under blue sky during daytime." width="1200" height="630" loading="lazy" decoding="async">
  <figcaption>A vibrant sunflower stands tall against a backdrop of soft blue sky dotted with delicate white clouds in Fowlerville, United States. Captured by Aaron Burden (@aaronburden) on Unsplash.<figcaption>
</figure>