vitepress-plugin-image-optimize

A plugin to convert and resize images in VitePress.

Installation

pnpm add -D vitepress-plugin-image-optimize

Usage

// .vitepress/config.ts

import {optimizeImages} from "vitepress-plugin-image-optimize";

// https://vitepress.dev/reference/site-config
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
        lazyLoading: true, // Default: false
      }))
    }
  }
})

To mark an image as 2x, add @2x to its name. For example, [email protected].

The plugin will make a smaller version of the image and show it on devices with a smaller screen resolution.

Contributing

It's most welcome. Please open an issue or a pull request.