Image Optimization
Tối ưu hóa Ảnh (Hiệu suất Web)
Quy trình giảm kích thước tệp ảnh đến mức nhỏ nhất có thể mà không làm giảm chất lượng hình ảnh đến mức không thể chấp nhận được, cải thiện tốc độ tải trang, giảm tiêu thụ băng thông và tăng xếp hạng công cụ tìm kiếm.
Chi tiết kỹ thuật
Quy trình tối ưu hóa bao gồm: chọn định dạng (AVIF > WebP > JPEG cho ảnh chụp; SVG > WebP > PNG cho đồ họa), kích thước phù hợp (phục vụ 2x cho Retina, không bao giờ lớn hơn), điều chỉnh chất lượng (JPEG 75-85, WebP 75-80 cho hầu hết ảnh chụp), loại bỏ siêu dữ liệu (EXIF, cấu hình ICC không cần cho web), mã hóa progressive/interlaced để cải thiện hiệu suất cảm nhận và công cụ nén (MozJPEG, oxipng, cwebp, avifenc). Phần tử HTML
Ví dụ
```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);
```