Support for loading="lazy" on images in markdown templates?

[1ockwood]

I searched around a bit, but couldn't seem to find any info around this. I'm curious if it would be within the scope of 11ty to implement support for including loading="lazy" attributes on images within markdown templates? I could always code the <img /> tag as desired to accomplish this, but it'd be nice to utilize markdown format for it, if possible.

[pdehaan]

I don't think 11ty does anything special w/ images. You'll probably want to look at a markdown-it plugin for that. Maybe something like https://www.npmjs.com/package/markdown-it-image-lazy-loading and then set your custom markdown-it library using https://www.11ty.dev/docs/languages/markdown/

[1ockwood]

Ah, I missed that in the docs. That makes sense. Thanks for the info, and pointing me in the right direction!

[pdehaan]

You might also be able to find a few different 11ty-plugins that do similar things (vs rolling it yourself w/ markdown-it).

See https://github.com/liamfiddler/eleventy-plugin-lazyimages, for example.

[1ockwood]

Okay, cool. I'll take a look into that as well. Thanks again for your help @pdehaan!

[thomasclausen]

You could also try giving the eleventy-img plugin a try.
I haven't really tried it myself yet, but you are able to add loading="lazy", plus set some aditional attributes and settings.

[1ockwood]

Nice, I'll have to take a look into that, too. Glad I asked about this. Thank you @thomasclausen!

[nhoizey]

If you want to keep Markdown's syntax for images, you can also try my own responsive images plugin: https://nhoizey.github.io/images-responsiver/eleventy-plugin-images-responsiver/

It allows you to add attributes to images, like loading="lazy":
https://nhoizey.github.io/images-responsiver/eleventy-plugin-images-responsiver/tutorial/06-presets-properties/#adding-other-attributes

[1ockwood]

This looks interesting, too. I'll definitely take a look into it. Thanks, and nice work!