$img to replace images in markdown with widths not bigger than original

Hi, i'm using markdown content with images like

# title
![](/uploads/image1.jpg)
![](/uploads/image2.jpg)

I render that markdown using @nuxtjs/markdownit and placing in template like

<div v-html="content.htmlOutput" />

Before that, I wanted to prepare all regular images to get the responsive benefits using $img

I put all this process into asyncData function to get fastest response

async asyncData({ app, $md, $img, $strapi, route, redirect }) {
 // Fetch content here
 const content = ...
 // use @nuxtjs/markdownit here to get html version
 var html = $md.render(content.markdown)
 html = html.replace(/<img[^>]+>/g, (p0) =>
      {
        const m = p0.match(/src=['"]([^'"]+)['"]/)
        if(!m||!m[1]) return p0
        // here we could calculate proper 'sizes' for this image
        const SIZES = 'xs:100vw xm:100vw sm:100vw md:100vw lg:100vw'
        const src = m[1]
        const img = $img.getSizes(src, {
          sizes: SIZES,
          modifiers: {
            format: 'webp',
            quality: 90
          }})    
        return  `<img
        src="${$img(src, { quality: 70 })}"
        srcset="${img.srcset}"
        sizes="${img.sizes}"
      >`
      })
    content.htmlOutput = html
    return {content}
}

There is some things here:

• I see the $img.getSizes is unstable. I hope the functionality will survive in time.
• I want to get only the image sizes needed. If image is only 400px width, then I don't need the 'md:100vw' or 'lg:100vw' size.
• Perhaps I need to access image file, get its dimensions, and generate proper SIZES string.

¿is there any better way to do this?

The issue names the $img and $img.getSizes entry points but no repository files or tests. Start by tracing those entry points and the markdown-generated replacement, then determine whether image dimensions can limit generated sizes; done means a clear, supported approach for responsive markdown images.