Как правильно уменьшить вес изображения: сначала размер, потом сжатие

1. Порядок определяет результат

Большинство сразу тянется к ползунку качества. Эффективный порядок — обратный.

Уменьшите размеры до тех, в которых изображение реально показывается

Выберите подходящий формат

И только потом настраивайте качество

Если фото шириной 4000 px показывается при 800 px, остальные 3200 px добавляют байты, ничего не давая глазу. Уменьшение ширины в пять раз сокращает число пикселей в двадцать пять раз. Никакая настройка качества не даст экономии такого масштаба.

2. Сжатие с потерями и без потерь

Без потерь (PNG, WebP lossless): исходные пиксели восстанавливаются в точности. Подходит для скриншотов, схем и изображений с текстом.

С потерями (JPEG, WebP lossy, AVIF): отбрасывает информацию, к которой глаз наименее чувствителен. Подходит для фотографий.

Сжатие с потерями необратимо. При каждом пересохранении JPEG потери накапливаются. Храните оригинал и сжимайте копию.

3. Выбор формата

| Формат | Лучше всего для | Примечания |
|---|---|---|
| JPEG | Фотографии | Поддерживается везде, без прозрачности |
| PNG | Скриншоты, логотипы, схемы | Без потерь, прозрачность, слишком тяжёлый для фото |
| WebP | Большинство изображений для сайта | На 25–35% меньше JPEG, поддерживает прозрачность и анимацию |
| AVIF | Фотографии | Меньше WebP, кодирование медленнее |

Сохранять скриншот в JPEG — частая ошибка: вокруг букв появляются заметные артефакты, а файл почти не меньше, чем в PNG.

4. Насколько снижать качество

Для JPEG и WebP практическая точка баланса — диапазон 0.75–0.85.

Выше 0.9: файлы намного больше при едва заметной разнице

0.75–0.85: на большинстве фото ухудшение трудно заметить

Ниже 0.6: на плавных градиентах, например небе или коже, появляется бандинг

Правильное значение для каждого изображения своё, поэтому сравнивайте на глаз в реальном размере показа.

5. Сжатие и конфиденциальность

Фото со смартфона содержат метаданные EXIF: время съёмки, модель устройства и — в зависимости от настроек — GPS-координаты. Публикация снимка, сделанного дома, может выдать ваше местоположение.

Компрессоры, которые перерисовывают изображение через canvas, обычно отбрасывают EXIF. Разные инструменты ведут себя по-разному, поэтому когда это важно, проверяйте свойства итогового файла.

6. С точки зрения производительности сайта

Самое крупное изображение на странице обычно и есть элемент LCP, то есть вес изображения — это воспринимаемое время загрузки.

Для экранов высокой плотности готовьте изображение не более чем вдвое больше отображаемого размера.

Добавляйте loading="lazy" изображениям ниже первого экрана.

Задавайте width и height, чтобы избежать сдвигов макета (CLS).

7. Инструмент

Компрессор изображений EVEDAYS сжимает и конвертирует PNG, JPG и WebP прямо в браузере. Загрузки на сервер нет, поэтому файл не подвергается риску при передаче, — но от вредоносных программ, уже находящихся на вашем устройстве, это не защищает.

8. Источники

web.dev — Optimize images

MDN — Image file type and format guide