Add `height` / `width` attribute to images to avoid layout shifts

[sapphi-red]

Is your feature request related to a problem? Please describe.

When using ![alt](img), height / width attributes are not set and browsers cannot avoid layout shifts caused by the image.

For example, when clicking the non-inherit badge on the right side of each header on https://deploy-preview-20471--vite-docs-main.netlify.app/config/dep-optimization-options.html, the image above the link is shown in the viewport after the image is loaded.

Describe the solution you'd like

Vitepress to generate height / width attributes for the images.

Describe alternatives you've considered

Add it manually by writing ![alt](link){height=100 width=200} or ![alt](link){style="aspect-ratio:2; width:100%"}

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

You can try https://github.com/boyum/markdown-it-image-size/blob/main/demo/vitepress/.vitepress/config.mts

(change process.cwd() to fileURLToPath(new URL('../public', import.meta.url)))

[brc-dd]

Tested locally, seems to work fine. docs/guide/api-plugin.md:15 will need change though, it should be relative - ../images/vite-plugin-inspect.png

[sapphi-red]

That plugin worked, thanks!

I think it'd be nice to have this by default.