Markdown images are an anti-pattern

See Markdown images are an anti-pattern on daverupert.com

Here Dave suggests using the html <img> tag over trying to hack the markdown image element which doesn’t give you much control over how to render an image. It’s what the creator of markdown suggests, so it’s a reasonable suggestion. Some markdown engines support extensions but it comes at the expense of portability and it’s a mess to read.

Thing is, you can have portability and the power of HTML in a Markdown image tag. One feature I love about Hugo are render hooks which modify how a markdown element is rendered. I had a similar issue to Dave and I realized that I could specify a JSON object with the elements I wanted in the title attribute, which isn’t very useful. Hugo has since done a lot to allow attributes for images¹, but it isn’t very portable.

To mitigate this, you can handle some of the attributes in render hook logic. For instance, I can get the image dimensions by querying the images metadata and I can specify some default attributes (like lazy loading and decoding). For srcsets and alternate image formats, we can provide even more logic to the render hook. This results in some wild code, but you only need to do it once.

I’ll admit that I’m the biggest simp for render hook support in Markdown since it opens up so many possibilities. I haven’t nailed it this render hook but I am trying. Then again, if you’re doing all this work, I guess the img element works just fine.