Как сжать изображения для сайта
Изображения обычно самая тяжёлая часть страницы. Вот как сделать их лёгкими.
1. Уменьшите до размера показа
Фото шириной 4000 px, показанное в 800 px, тратит впустую 96% пикселей. Уменьшайте изображения максимум до двойной ширины показа — этого хватает для чёткости на retina-экранах.
2. Выберите современный формат
WebP поддерживается всеми современными браузерами и обычно на 25–35% легче JPG. AVIF для фото ещё легче. PNG оставьте только для графики, которой нужно сжатие без потерь.
3. Подберите качество
Качество 75–82 для большинства фото визуально неотличимо от оригинала. Сравнивайте «до» и «после», чтобы найти минимальное значение, при котором всё ещё выглядит хорошо.
4. Удалите метаданные
Данные EXIF добавляют к каждому изображению десятки килобайт и могут раскрыть личную информацию. Удаляйте их перед публикацией.
5. Автоматизируйте
Для существующих библиотек используйте пакетную обработку, а для новых загрузок — API или плагин CMS, чтобы каждое изображение оптимизировалось автоматически.