vite-plugin-vsharp

VSharp: Simple Image Compression for Vite Projects

VSharp is a Vite plugin that makes image optimization easy. It uses the powerful Sharp library to automatically compress your images during the build process. This means faster-loading websites with high-quality images, all without any extra work on your part.

Features

• Works with common image formats: .jpg/.jpeg, .png, .gif, and .webp
• Uses Sharp’s proven compression methods for each format type (Sharp documentation)

Getting Started

Installation

Add VSharp to your project:

npm install vite-plugin-vsharp --save-dev

Basic Setup

Add VSharp to your Vite config file:

// vite.config.js
import vsharp from 'vite-plugin-vsharp';

export default {
  plugins: [
    vsharp({
      // Your options here
    }),
  ],
};

Configuration Options

Here’s how you can customize VSharp to fit your needs:

1. exclude: Skip specific images during compression. Just list the filenames:

   // vite.config.js
   {
     plugins: [
       vsharp({
         exclude: [
           "bg.jpg", // Won't compress this file
           // Note: Just use filenames, no paths needed
         ],
       }),
     ]
   }
   

2. excludePublic: Skip images in your public folder using patterns:

   // vite.config.js
   {
     plugins: [
       vsharp({
         excludePublic: [
           "public/*", // Skip everything in public
           "public/test_img/*", // Skip all images in test_img
         ],
       }),
     ]
   }
   

3. includePublic: Choose specific files to compress from excluded folders:

   // vite.config.js
   {
     plugins: [
       vsharp({
         excludePublic: [
           "public/*" // Skip all public files
         ],
         includePublic: [
           "public/images/*", // But compress files in this folder
           "public/test_img/001.jpg", // And this specific image
         ],
       }),
     ]
   }
   

   Note: includePublic takes priority over excludePublic, letting you:

   • First exclude entire folders
   • Then pick specific files or folders to include
   • Use either patterns or exact file paths

4. Image Size Options: Control how your images are resized:

   // vite.config.js
   {
     plugins: [
       vsharp({
         width: 800, // Maximum width (won't upscale smaller images)
         height: 800, // Maximum height (won't upscale smaller images)
         scale: 0.8, // Or use this to reduce by percentage (overrides width/height)
       }),
     ]
   }
   

5. Metadata Options: Keep important image information:

   // vite.config.js
   {
     plugins: [
       vsharp({
         preserveMetadata: {
           orientation: true, // Keeps correct image orientation
         },
       }),
     ]
   }
   

Default Settings

VSharp comes with these sensible defaults, which you can override as needed:

{
  "includePublic": [],
  "excludePublic": [],
  "exclude": [],
  ".jpg": {
    "quality": 80
  },
  ".jpeg": {
    "quality": 80
  },
  ".png": {
    "quality": 80,
    "palette": true
  },
  ".webp": {
    "lossless": true
  },
  ".gif": {
    
  },
  "preserveMetadata": {
    "orientation": false
  }
}

For more advanced options, check out the Sharp documentation.

This site is open source. Improve this page.