🍋
Menu
Image

Image Optimization

图像优化(网页性能)

在不造成不可接受的视觉质量损失的情况下将图像文件大小减小到尽可能小的过程。图像优化对于快速加载网站和高效带宽使用至关重要。

技术细节

优化流水线包括:格式选择(照片优先AVIF > WebP > JPEG;图形优先SVG > WebP > PNG)、质量调优(JPEG 75-85,WebP 75-80)、尺寸调整到显示尺寸、元数据剥离(EXIF、ICC配置文件——除非需要颜色管理)和渐进式编码。MozJPEG、oxipng和libavif是主要的开源优化器。

示例

```javascript
// Image compression via Canvas
canvas.toBlob(
  blob => console.log(`Size: ${(blob.size/1024).toFixed(0)} KB`),
  'image/jpeg',
  0.8  // quality: 0.0 (smallest) to 1.0 (best)
);

// WebP output (25-34% smaller than JPEG)
canvas.toBlob(cb, 'image/webp', 0.8);
```

相关工具

相关术语