Image Optimization
Image Optimization (Web Performance)
The process of reducing image file sizes to the smallest possible amount without unacceptable visual quality loss, improving page load speed, reducing bandwidth consumption, and boosting search engine rankings.
技術的詳細
An optimization pipeline includes: format selection (AVIF > WebP > JPEG for photos; SVG > WebP > PNG for graphics), appropriate dimensions (serve 2x for Retina, never larger), quality tuning (JPEG 75-85, WebP 75-80 for most photos), metadata stripping (EXIF, ICC profiles not needed for web), progressive/interlaced encoding for perceived performance, and compression tools (MozJPEG, oxipng, cwebp, avifenc). The HTML
例
```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);
```