WebP
WebP (Web Picture Format)
A modern image format developed by Google that provides both lossy and lossless compression with significantly smaller file sizes than JPEG and PNG, while also supporting transparency and animation.
技術的詳細
WebP's lossy mode uses VP8 video codec technology with predictive coding and block-based transforms, achieving 25-34% smaller sizes than JPEG at equivalent quality. Lossless WebP uses entropy coding with spatial prediction, producing files 26% smaller than PNG. WebP supports 8-bit alpha channel transparency (both lossy and lossless), animation (replacing GIF at a fraction of the size), and ICC color profiles. Browser support is now universal across Chrome, Firefox, Safari (14+), and Edge. The Canvas API's toBlob('image/webp', quality) enables client-side WebP encoding.
例
```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);
```