#Add lazy loading to images added in an MDX file

9 messages · Page 1 of 1 (latest)

pallid lion
#

When I create a new blog post using an MDX file and add images to it, they are rendered as regular img tags.

Is there a way for me to modify the image tags that are rendered from the mdx file without using an Astro component in the mdx file. All I need to do for lazy loading is add a data-src attribute to every image. Is there a way to do this in pre processing?

I don't want to have to use a custom component for this, as this mdx file will be generated using a text editor in a CMS by non-technical users, so I don't want them to have to wrap things in component tags, it's not user-friendly

rustic burrowBOT
#
No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

austere bay
#

the best thing I can think of would be to create a custom remark/rehype component that modifies any images. I made a quick search, but couldn't find anything specifically for this

eager helm
pallid lion
pallid lion
#

I realised as I'm using the new Astro assets feature, the loading="lazy" attribute is already being added to my images so I already have lazy loading

Realsied this when I noticed I couldn't map my images onto a component as I believe they're already mapped onto the Astro <Image> component

pallid lion
#

@eager helm On this, I would love to make a custom image component that uses a <picture> html tag and serves multiple <img> tags using Astro Assets to make .jpg and a .webp, do you know if that would be possible?

Then would I be able to map my custom component onto img tags for my markdown files if they're already being mapped to the Astro <Image> component? As I believe that was what was blocking it before which I mentioned in my message above this one

eager helm
#

I see, the issue is, the image integration might catch it first on the remark pipeline before it's passed to you.
Even if it was possible, how will you decide if an img goes to the Image integration or to your custom component. You have to figure out what comes out, and maybe map the Image to a different custom Image ?

pallid lion
#

Yeah I'm not too sure, it's a little passed my expertise! I guess for now I will take a step back and just decide whether to opt for compataibility and serve .jpg images, or opt for performance and opt for .webp images...

Do you know if there is a way to set the format settings for the Image integration for set pages? E.g. to serve .webp on all blog posts perhaps using the mapping with a config setting?