Уменьшить или сжать? Правильный порядок уменьшения изображений

«Уменьшить изображение» может означать две совсем разные вещи: уменьшить его размеры в пикселях (ресайз) или облегчить файл при тех же размерах (сжатие). Их часто путают, но при неверном порядке вы либо не выиграете в размере, либо зря потеряете качество. Понимание разницы — и правильного порядка — ключ к маленьким файлам, которые хорошо выглядят.

Что делает ресайз

Ресайз меняет пиксельные размеры, например с 4000×3000 до 1200×900. Размер файла растёт с числом пикселей, поэтому сокращение размеров даёт огромный эффект: уменьшив ширину и высоту вдвое, вы убираете около 75% пикселей — и обычно большую часть веса.

Что делает сжатие

Сжатие уменьшает число байтов для хранения тех же пикселей: отбрасывая малозаметные детали (с потерями) или эффективнее упаковывая данные (без потерь). Оно снижает вес без изменения размеров, ценой небольшой потери качества у форматов с потерями.

Что делать первым?

Сначала ресайз, потом сжатие. Нет смысла старательно сжимать миллионы пикселей, которые вы сейчас выбросите. Уменьшите изображение до наибольшего размера показа, а затем сжимайте уже уменьшенную картинку. В обратном порядке информация, которую вы сжали, снова выбрасывается ресайзом — двойная работа.

Простое правило

• Определите максимальный размер показа (плюс ~2x для retina)
• Уменьшите изображение до этого размера
• Конвертируйте в WebP или AVIF с качеством около 75
• Сравните до/после и подстройте при необходимости

Сочетайте оба для лучшего результата

Наибольший выигрыш — когда сделаны оба шага. Фото на 5 МБ в узкой колонке блога может опуститься сильно ниже 100 КБ после ресайза до нужной ширины и сжатия в WebP — без видимой разницы. Scrunch берёт на себя конвертацию и сжатие: добавьте разумный размер показа, и изображения станут настолько лёгкими, насколько возможно.

Частые вопросы

Портит ли ресайз качество?

Если уменьшать примерно до размера показа, а не меньше, картинка на экране выглядит даже чётче. Размытость появляется, только если сжать её меньше занимаемого места — ориентируйтесь на размер показа (около 2x для retina).

Разве недостаточно одного сжатия?

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

Можно ли сделать ресайз и сжатие за один заход?

Да. Примените два шага по порядку: ресайз до размера показа, затем сжатие в WebP или AVIF. Пока порядок соблюдён, вы получите наименьший файл при заданном качестве.

До какой ширины уменьшать?

До максимальной ширины, в которой изображение реально показывается. Если колонка контента 800 пикселей, около 1600 пикселей хватит и для retina-экранов. Больше — пустая трата трафика, меньше — размытость на экране.