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"
        publicDir: "public", // Default: "public"
        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 👋

[rafshawn]

Hey there, this looks like a pretty good plugin! Are there only the three parameters?

The only issue I have is images that aren't saved in /public/images.

Any way to optimize images that are stored in different folders? Looks like the build process defaults to <srcDir>/public/images/<image> and not sure if there's any way to change that.

Trynna see if organizing images in a way like this would still work:

.
├─ Fruits
│  ├─ fruits.md
│  └─ fruit-images
│     ├─ apples.png
│     └─ oranges.png
├─ Vegetables
│  ├─ vegetables.md
│  └─ vegetable-images
│     ├─ spinach.png
│     └─ beets.png
└─ index.md

[unlocomqx]

Hi @rafshawn

I added a publicDir setting in v1.5.1, you can set it to an empty string.

Cheers 👋