feat(core): add quality parameter for image compression control
This commit is contained in:
46
readme.md
46
readme.md
@@ -93,6 +93,38 @@ const avifBuffer = await processor.getFromSmartfile(imageFile, {
|
||||
});
|
||||
```
|
||||
|
||||
### 🎚️ Quality Control
|
||||
Fine-tune image compression quality for the perfect balance between file size and visual fidelity:
|
||||
|
||||
```typescript
|
||||
// High quality JPEG (larger file size)
|
||||
const highQualityJpeg = await processor.getFromSmartfile(imageFile, {
|
||||
format: 'jpeg',
|
||||
quality: 90 // 1-100, higher = better quality
|
||||
});
|
||||
|
||||
// Optimized for web (smaller file size)
|
||||
const webOptimized = await processor.getFromSmartfile(imageFile, {
|
||||
format: 'jpeg',
|
||||
quality: 75, // Good balance for web
|
||||
progressive: true
|
||||
});
|
||||
|
||||
// Ultra-compressed WebP
|
||||
const tinyWebP = await processor.getFromSmartfile(imageFile, {
|
||||
format: 'webp',
|
||||
quality: 60 // WebP handles lower quality better than JPEG
|
||||
});
|
||||
|
||||
// Quality works with all lossy formats
|
||||
const qualityAvif = await processor.getFromSmartfile(imageFile, {
|
||||
format: 'avif',
|
||||
quality: 80 // AVIF provides excellent quality even at lower values
|
||||
});
|
||||
```
|
||||
|
||||
> 💡 **Pro tip**: Different formats handle quality settings differently. AVIF and WebP generally look better than JPEG at the same quality level.
|
||||
|
||||
### 📸 Progressive JPEG Support
|
||||
Create progressive JPEGs that load in multiple passes for better perceived performance:
|
||||
|
||||
@@ -138,13 +170,15 @@ Work directly with buffers for maximum flexibility:
|
||||
const processedBuffer = await processor.computeAssetVariation(imageBuffer, {
|
||||
width: 300,
|
||||
format: 'webp',
|
||||
quality: 85,
|
||||
invert: true
|
||||
});
|
||||
|
||||
// Create progressive JPEG from buffer
|
||||
const progressiveBuffer = await processor.computeAssetVariation(imageBuffer, {
|
||||
format: 'jpeg',
|
||||
progressive: true
|
||||
progressive: true,
|
||||
quality: 88
|
||||
});
|
||||
|
||||
// Special AVIF creation method (sharp mode only)
|
||||
@@ -251,20 +285,23 @@ async function optimizeForWeb(sourceImage: SmartFile) {
|
||||
// Modern browsers: AVIF
|
||||
avif: await processor.getFromSmartfile(sourceImage, {
|
||||
format: 'avif',
|
||||
width: 1200
|
||||
width: 1200,
|
||||
quality: 85 // AVIF excels at lower quality settings
|
||||
}),
|
||||
|
||||
// Good browser support: WebP
|
||||
webp: await processor.getFromSmartfile(sourceImage, {
|
||||
format: 'webp',
|
||||
width: 1200
|
||||
width: 1200,
|
||||
quality: 82 // WebP sweet spot for quality/size
|
||||
}),
|
||||
|
||||
// Universal fallback: Progressive JPEG
|
||||
jpeg: await processor.getFromSmartfile(sourceImage, {
|
||||
format: 'jpeg',
|
||||
progressive: true,
|
||||
width: 1200
|
||||
width: 1200,
|
||||
quality: 80 // Standard web quality
|
||||
})
|
||||
};
|
||||
|
||||
@@ -289,6 +326,7 @@ interface IAssetVariation {
|
||||
height?: number; // Target height (maintains aspect ratio if width not set)
|
||||
invert?: boolean; // Invert colors (jimp only currently)
|
||||
progressive?: boolean; // Create progressive JPEG (sharp only, jpeg format only)
|
||||
quality?: number; // Compression quality 1-100 (lossy formats only)
|
||||
}
|
||||
```
|
||||
|
||||
|
Reference in New Issue
Block a user