How to enable Image Lazy Loading globally.

[BenRoe]

Hello,
how i enable Image Lazy Loading on all pages?
Is there any downside if i do it?

[brc-dd]

https://vitepress.dev/guide/markdown#image-lazy-loading

You can use it with something like #4853 (comment) to avoid layout shifts.

Is there any downside if i do it?

As a general rule, the images that are above the fold should not be lazy loaded. Like if you've some image near the top of the page then it shouldn't be lazy loaded. Otherwise there will be delay for viewers.

[BenRoe]

Thank you for the answer. I am new to vue/vite/vitepress.
Which file should I insert the code into? Into every *.md file?

export default {
  markdown: {
    image: {
      // image lazy loading is disabled by default
      lazyLoading: true
    }
  }
}

[brc-dd]

Ah no. You'll have a file like .vitepress/config.js (or with some other extension)

import { defineConfig } from 'vitepress'

export default defineConfig({
  // ... other stuff ...
  markdown: {
    image: { lazyLoading: true }
  }
})