Как сжимать изображения для веба
Большая часть веса изображения теряется задолго до того, как включается кодек. Вот порядок действий, который действительно убирает байты, — и настройки, на которые стоит обращать внимание.
Почему вес изображений важен
На большинстве сайтов изображения — крупнейший вклад в вес страницы, часто больше, чем все скрипты, стили и шрифты вместе. Отсюда два следствия. Во-первых, посетители на мобильном трафике ждут дольше и платят за это. Во-вторых, вес изображений напрямую влияет на Largest Contentful Paint — метрику Core Web Vitals, которую чаще всего винят в плохой оценке производительности, потому что самый крупный элемент страницы обычно является главным изображением.
Хорошая новость: вес изображений — ещё и самое простое, что можно исправить. Ничего из этого не требует переделки сборочного конвейера.
Работайте по убыванию влияния
Инструменты сжатия соблазняют сразу взяться за ползунок качества. Это самый слабый из трёх рычагов. Порядок должен быть таким:
- Изменить размер — наибольший выигрыш, с большим отрывом.
- Выбрать формат — крупный разовый выигрыш.
- Настроить качество — тонкая настройка с реальной, но ограниченной отдачей.
1. Сначала измените размер
Фотография шириной 4000 пикселей, показанная в блоке шириной 800 пикселей, несёт примерно в 25 раз больше пикселей, чем может показать. Ни один кодек этот разрыв не закроет. Отдавать изображение завышенного размера, а потом агрессивно сжимать его — классическая ошибка: вы платите дважды, а видимый результат хуже, чем если бы вы просто правильно изменили размер.
Меняйте размер до фактического размера показа, удвоенного для экранов высокой плотности, если изображение важно. Как правило, главному изображению на всю ширину редко нужно больше примерно 2000 пикселей по ширине, а изображениям внутри страницы — редко больше 1200.
2. Выберите формат
Фотографии стоит переводить в AVIF или WebP. Графика с резкими краями, текстом или прозрачностью должна оставаться PNG или WebP без потерь. Гид по форматам разбирает компромиссы подробно; если коротко — формат выбирают по типу изображения, а не один на всё.
3. Настройте качество
Для форматов с потерями качество — это шкала от 0 до 100, которая обменивает точность на размер. Зависимость не линейная: снижение с 90 до 80 часто срезает треть файла без заметной разницы, а снижение с 50 до 40 в основном добавляет видимые артефакты.
Разумные отправные точки:
| Содержимое | Примерная цель | Примечания |
|---|---|---|
| Фотографии для веба | качество JPEG/WebP ~75 | Обычная золотая середина; AVIF достигает сопоставимого качества при ещё меньшем значении |
| Миниатюры, аватары | качество 60–70 | Небольшой размер показа скрывает больше, чем вы ожидаете |
| Скриншоты, интерфейс, текст | Без потерь (PNG / WebP без потерь) | Любое сжатие с потерями размывает границы в 1 пиксель и глифы |
| Архив / печать | Качество 90+, или оригинал | Сохраняйте оригинал; это не сценарий веб-доставки |
Оценивайте в размере показа, а не с увеличением. Сравнивайте сжатое изображение и оригинал в том размере, в котором они действительно будут показаны. Различия, бьющие в глаза при 400 % увеличении, в реальном контексте обычно невидимы.
Пакетный процесс, который масштабируется
- Соберите всё в одну папку — скриншоты, фотографии, экспорты.
- Разделите на две группы: фотографические и графические. У них разные форматы и разные настройки.
- Измените размер каждой группы до её размеров вывода.
- Фотографическую группу сожмите в AVIF и WebP; графическую — без потерь.
- Сравните каждый результат с оригиналом. Всё, что стало больше, отбрасывается — это сигнал, а не неудача.
- Сохраняйте оригиналы. Сжатый результат — это артефакт сборки; оригиналы — это архив.
tinyimg берёт на себя шаги 4 и 5 для до 30 файлов за раз и умеет выдавать несколько форматов за один проход, чтобы вы сравнивали размеры напрямую. Пакетная обработка в браузере означает ещё и то, что папка с клиентскими или личными фотографиями вообще не покидает вашу машину — это ценно, если политика загрузок имеет значение.
Ошибки, которые тихо съедают больше всего байтов
- Одно огромное изображение для всех устройств. Один JPEG на 2000 пикселей — это не адаптивная стратегия. Используйте
srcset, чтобы телефоны получали уменьшенный вариант. - Повторное сохранение JPEG. Каждое поколение с потерями накапливает повреждения. Всегда перекодируйте из оригинала.
- PNG для фотографий. Часто в 5–10 раз больше, чем эквивалентный JPEG, без какой-либо видимой выгоды.
- Погоня за «минимально возможным» за пределами полезного. Экономия 40 % — это отлично; 45 % с видимыми полосами на небе — нет.
- Забытая отложенная загрузка. Изображения ниже первого экрана не должны блокировать первую отрисовку. Отложенная загрузка — это изменение одного атрибута с большим эффектом.
- Отсутствие повторных замеров. Задайте бюджет и проверяйте его — иначе он ползёт вверх ресурс за ресурсом.
Как понять, что вы закончили
Выберите бюджет страницы и держите его. Разумная цель для страницы с контентом — держать общий вес изображений примерно в пределах одного мегабайта, причём основную работу выполняет главное изображение. Если страница сильно выходит за эти рамки, обычные виновники — не уменьшенное главное изображение, фотография, сохранённая как PNG, или несколько декоративных изображений, которые могли бы быть SVG или CSS.
Занятие неблагодарное, но короткое: изменить размер, выбрать формат, задать разумное качество, проверить в размере показа и сохранить оригиналы. Эта последовательность убирает подавляющую часть избегаемого веса изображений почти на любом сайте.