Image Optimization
Оптимизация изображений (веб-производительность)
Процесс уменьшения размера файлов изображений до минимально возможного объёма без неприемлемой потери визуального качества, улучшающий скорость загрузки страниц, снижающий потребление полосы пропускания и повышающий позиции в поисковых системах.
Техническая деталь
Конвейер оптимизации включает: выбор формата (AVIF > WebP > JPEG для фото; SVG > WebP > PNG для графики), подходящие размеры (2× для Retina, не больше), настройку качества (JPEG 75–85, WebP 75–80 для большинства фото), удаление метаданных (EXIF, ICC-профили не нужны для веба), прогрессивное/чересстрочное кодирование для воспринимаемой производительности и инструменты сжатия (MozJPEG, oxipng, cwebp, avifenc). 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);
```