In Hugo v108.0, added an option which would finally let use the <picture>
/<source>
elements the way I want it to.
Those elements are essential to doing a lot of cool things with images, like specifying different image formats, dark mode images, art direction and more.
What I wanted to do was wrap the markdown image tags in a picture/source element like this:
{{% picture %}}
{{% source srcset="cool-tree.webp" type="image/webp" %}}
{{% source srcset="cool-tree.webp" type="image/avif" %}}

{{% /picture %}}
Issue was that Hugo would wrap the image element in a paragraph, making it invalid. With Hugo v108, you can configure markdown.goldmark.parser.wrapStandAloneImageWithinParagraph
to false so that it doesn’t do that, making this technique possible at last.
I have a lot to say about images and Hugo so follow this blog on RSS to hear all about it.