Vue 3 component for image compression with build-time optimization
npm install vue3-picture-compressorVue 3 component for image optimization with automatic compression at build time.
- 🖼️ Picture component for Vue 3
- 🗜️ Automatic image compression at build time (like TinyPNG)
- ⚙️ Configurable compression percentage
- 🌐 Automatic WebP version generation
- 📦 Easy integration with Vite
``bash`
npm install vue3-picture-compressor
- Vue 3.x
- Vite (for using the compression plugin)
- Node.js 18+ (for building)
In your vite.config.js or vite.config.ts:
`javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { vuePictureCompressor } from 'vue-picture-compressor/vite-plugin'
export default defineConfig({
plugins: [
vue(),
vuePictureCompressor({
compression: {
quality: 80, // Quality percentage (0-100, where 100 is no compression)
jpegQuality: 80, // Quality for JPEG
pngQuality: [0.6, 0.8], // Quality for PNG [min, max]
webp: true, // Create WebP versions
webpQuality: 80, // Quality for WebP
svgo: true // Optimize SVG
},
include: /\.(jpg|jpeg|png|webp|svg)$/i, // Which files to process
exclude: /node_modules/ // What to exclude
})
]
})
`
#### Global Registration
`javascript
import { createApp } from 'vue'
import App from './App.vue'
import VuePictureCompressor from 'vue3-picture-compressor'
const app = createApp(App)
app.use(VuePictureCompressor)
app.mount('#app')
`
#### Local Registration
`vue
alt="Image description"
loading="lazy"
:webp="true"
/>
`
#### Props
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| src | string | - | Image path (required) |alt
| | string | '' | Alternative text |loading
| | 'lazy' \| 'eager' | 'lazy' | Loading strategy |imgClass
| | string | '' | CSS class for img element |imgStyle
| | string \| Record | {} | Styles for img element |webp
| | boolean | true | Whether to use WebP version |
#### Events
| Event | Parameters | Description |
|-------|------------|-------------|
| load | event: Event | Emitted when image loads successfully |error
| | event: Event | Emitted when image loading fails |
#### CompressionOptions
`typescript`
interface CompressionOptions {
quality?: number // 0-100, overall quality (100 - no compression)
jpegQuality?: number // Quality for JPEG (0-100)
pngQuality?: [number, number] // Quality for PNG [min, max] (0-1)
webp?: boolean // Whether to create WebP versions
webpQuality?: number // Quality for WebP (0-100)
svgo?: boolean // Whether to optimize SVG
}
#### VuePictureCompressorOptions
`typescript`
interface VuePictureCompressorOptions {
compression?: CompressionOptions
include?: string | RegExp | (string | RegExp)[] // Patterns for including files
exclude?: string | RegExp | (string | RegExp)[] // Patterns for excluding files
}
`vue`
`vue`
alt="Photo"
:imgClass="'rounded-lg shadow-md'"
:imgStyle="{ maxWidth: '100%' }"
loading="eager"
/>
`vue
alt="Image"
@load="onImageLoad"
@error="onImageError"
/>
`
`javascript
// vite.config.js
import { vuePictureCompressor } from 'vue-picture-compressor/vite-plugin'
export default defineConfig({
plugins: [
vuePictureCompressor({
compression: {
quality: 70, // 30% compression
jpegQuality: 75,
pngQuality: [0.5, 0.7],
webp: true,
webpQuality: 75
}
})
]
})
`
1. At build time: The Vite plugin automatically finds all images in your project and compresses them using optimized algorithms (mozjpeg for JPEG, pngquant for PNG).
2. WebP versions: If enabled, WebP versions of images are automatically created for better performance.
3. Picture component: Uses the
- 90-100: Minimal compression, high quality (for important images)
- 70-89: Moderate compression, good quality (recommended)
- 50-69: Strong compression, acceptable quality (for thumbnails)
- 0-49: Maximum compression, low quality (not recommended)
MIT
If you have questions or suggestions, please create an issue in the GitHub repository.