Make `<img>` element have explicit `width` and `height`

[takenspc]

• [x] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

The content below <img> which doesn't have width and height can move suddenly. This can be distracting to users.

https://web.dev/optimize-cls/

To avoid this problem, vuepress could add width and height to <img>s.

What is expected?

Vuepress generates <img> elements with width and height attributes.

https://vuepress.vuejs.org/plugin/ (Markdown)

<img src="/architecture.png" alt="Architecture of VuePress" class="medium-zoom-image" width="1774" height="2334">

What is actually happening?

Vuepress generates <img> elements without width and height attributes.

https://vuepress.vuejs.org/plugin/ (Markdown)

<img src="/architecture.png" alt="Architecture of VuePress" class="medium-zoom-image">

Other relevant information

I think image-size package can be used for this.

[tolking]

Use markdown-it-imsize

// .vuepress/config.js
module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require('markdown-it-imsize'))
    }
  }
}

![Architecture of VuePress](/architecture.png =1774x2334)
to
<img src="/architecture.png" alt="Architecture of VuePress" width="1774" height="2334">

or use vuepress-plugin-img-lazy