VSharp is a powerful Vite plugin that utilizes the formidable Sharp library to compress and optimize static images during your build process. This helps to significantly reduce image sizes, enhancing your website or application's load time and overall performance. With VSharp, maintaining high-quality images at smaller file sizes becomes an effortless part of your development workflow.
![image](https://private-user-images.githubusercontent.com/29943110/337516583-3e4b97f4-892c-47c0-b850-d1e0fc46b245.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIyMTIwMjksIm5iZiI6MTcyMjIxMTcyOSwicGF0aCI6Ii8yOTk0MzExMC8zMzc1MTY1ODMtM2U0Yjk3ZjQtODkyYy00N2MwLWI4NTAtZDFlMGZjNDZiMjQ1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI5VDAwMDg0OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ0ZTA2OTk1MjZkNWNjMjUzMjdjNGM5OWNlNjgyNThmNTI0MGQzYTdhYTdiNjJlY2U2NjA1Y2E3MTZiY2NmN2UmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.aZQ2mTMG0KL9C-XMNzMwbmb96BeBk9EMI7WfgZVgeSw)
- Supported image formats:
.jpg/.jpeg
,.png
,.gif
,.webp
. - Integrates image compression features from Sharp's API, including
sharp().jpeg()
,sharp().png()
,sharp().gif()
, andsharp().webp()
(Sharp documentation).
To install the plugin, run the following command:
npm install vite-plugin-vsharp --save-dev
Add VSharp to your Vite configuration file:
// vite.config.js
import vsharp from 'vite-plugin-vsharp';
export default {
plugins: [
vsharp({
// Plugin options go here
}),
],
};
Customize the behavior of VSharp with the following options:
-
exclude
: Specify which image files to skip during image bundling. Simple names without path prefixes are required.// vite.config.js { // ... plugins: [ vsharp({ exclude: [ "bg.jpg", // Includes "bg.jpg" // Do not add path prefixes or hashes ], }), ] }
-
excludePublic
: Exclude images from the public directory using glob patterns. Prefixes relative to your project's root are necessary.// vite.config.js { // ... plugins: [ vsharp({ excludePublic: [ "public/test_img/*", // Exclude all images in public/test_img ], }), ] }
-
includePublic
: Specifically include images from an excluded directory, overriding theexcludePublic
option.// vite.config.js { // ... plugins: [ vsharp({ excludePublic: [ "public/test_img/*" ], includePublic: [ "public/test_img/001.jpg", // Include this particular image ], }), ] }
-
Resize options: Configure dimensions or scaling to resize images.
// vite.config.js { // ... plugins: [ vsharp({ width: 800, // Max width, images with a smaller width than this will not be resized height: 800, // Max height, images with a smaller height than this will not be resized scale: 0.8, // Overrides width and height }), ] }
-
Preserve Metadata: Maintain image metadata such as orientation.
// vite.config.js { // ... plugins: [ vsharp({ preserveMetadata: { orientation: true, // Preserves image orientation }, }), ] }
The plugin provides sensible defaults, which can be overridden by specifying your own settings in the plugin options:
{
"includePublic": [],
"excludePublic": [],
"exclude": [],
".jpg": {
"quality": 80
},
".jpeg": {
"quality": 80
},
".png": {
"quality": 80,
"palette": true
},
".webp": {
"lossless": true
},
".gif": {
},
"preserveMetadata": {
"orientation": false
}
}
For additional Sharp function parameters, refer to the official Sharp documentation.