A plugin to optimize images and add width and height.

[unlocomqx]

Hi 👋

I made this plugin for my docs and wanted to share it

https://github.com/unlocomqx/vitepress-plugin-image-optimize

It generates webp image and adds the size to prevent content jumping

Config example

export default defineConfig({
  // ..... your existing VitePress config

  markdown: {
    config: (md) => {
      md.use(optimizeImages({
        srcDir: "docs", // Default: "docs"
        quality: 90 // Default: 90
      }))
    }
  }
})

Output example:

<img 
  src="/webp/nature-0008.jpg-90-1738947704681.webp" 
  srcset="/webp/nature-0008.jpg-90-1738947704681.webp 1x, /webp/[email protected] 2x" 
  alt="Nature" 
  title="" 
  width="800" 
  height="600" 
  style="width:400px;"
>

If you'd like to contribute, feel free to create an issue or a pull request.

Cheers 👋