Anchor and Images

[wfjsw]

I'm having a weird experience with anchor links and images.

When I click an anchor that leads to another page (for example, search results), the browser redirects to that page and scrolls to the location of the anchor. However, when there are images not yet cached when navigating, they would take extra height when loaded. As a result, the anchor heading would move down by some distance, often below the viewport.

Is there any way to mitigate this?

[brc-dd]

Make a web search on "reduce cls due to images".

[wfjsw]

It suggests that I should go looking for a markdown-it plugin that automatically add width / height to images... Seems viable 👀

[brc-dd]

If the images are not much, you can manually specify height/width for images:

![image description]('your-image.png'){width=250px height=100px}

[wfjsw]

There is a lot, however, the md-it plugin seems to be broken, and the implementation looks incompatible, so in the end, I have to take the manual path anyway.

[elringus]

I've made a vite+md plugin that downloads remote media (images and video) assets, resolves their size and injects the width and height to the <img> and <video> tags, so that the layout doesn't shift at all when loading pages.

Here is the vite plugin: https://github.com/Naninovel/naninovel.github.io/blob/main/docs/.vitepress/ext/vite/vite-embed.ts
MarkdownIt plugin: https://github.com/Naninovel/naninovel.github.io/blob/main/docs/.vitepress/ext/markdown/markdown.ts