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

У вас есть папка с фотографиями. Они выглядят отлично. Но каждая весит по 5 МБ, и ваш сайт загружается так, будто на дворе 2010 год.

Значит, нужно уменьшить размер файлов. Но при этом вы не хотите потерять качество. Хорошая новость: вам не придётся выбирать между маленькими файлами и чёткими изображениями. Нужно просто знать, какие приёмы действительно работают.

Давайте разберём все способы, которые сокращают размер файла и сохраняют ваши изображения чёткими.

Почему ваши изображения весят так много?

Большинство камер и смартфонов сохраняют фотографии с гораздо большим объёмом данных, чем вам нужно. Снимок с 12-мегапиксельной камеры телефона легко достигает 6–8 МБ. Для печати плаката это нормально. Но для сайта, электронной почты или поста в соцсетях — это перебор.

Вот откуда берётся лишний размер:

• Высокое разрешение. Ваша камера фиксирует тысячи пикселей, которые никогда не будут отображены. Изображение 4000×3000, показанное на сайте в размере 800×600, тратит впустую 95% пикселей.
• Несжатый формат. Файлы RAW и BMP хранят каждое значение каждого пикселя. Никаких сокращений, никакой экономии.
• Метаданные. Настройки камеры, GPS-координаты, цветовые профили. Эти данные могут добавлять 50–100 КБ к каждому изображению.
• Глубина цвета. 16-битный цвет фиксирует тонкие градиенты, которые ваш монитор даже не может отобразить. Для большинства задач хватает 8-битного цвета.

Первый шаг к уменьшению файлов — понять, что из этого можно убрать без видимых изменений.

В чём разница между сжатием с потерями и без потерь?

Это самый важный выбор, который вам предстоит сделать. Сжатие с потерями и без потерь работает по-разному, и каждый подход подходит для разных ситуаций.

Сжатие без потерь удаляет только избыточные данные. Представьте, что вы упаковываете чемодан более компактно — всё содержимое остаётся на месте. Так работают ZIP-архивы. PNG тоже использует сжатие без потерь. Вы получаете файлы меньшего размера с нулевой потерей качества. Минус в том, что уменьшение скромное — обычно 20–40%.

Сжатие с потерями отбрасывает данные, которые ваши глаза, скорее всего, не заметят. Так работает JPEG. И WebP тоже. Экономия впечатляющая: файлы становятся на 60–90% меньше. А при правильных настройках вы честно не увидите разницы.

Вот простое правило:

Сценарий	Лучший подход	Почему
Фотографии для сайта	С потерями, качество 80–85%	Огромная экономия, разница незаметна
Скриншоты с текстом	Без потерь (PNG)	Текст остаётся чётким
Логотипы и иконки	Без потерь (PNG/SVG)	Важны чёткие края
Товары в интернет-магазине	С потерями, качество 85–90%	Баланс качества и скорости
Файлы для печати	Без потерь или минимум сжатия	Важна каждая деталь

Оптимальная точка для большинства фотографий — сжатие с потерями на уровне качества 80%. Вы уменьшите файл на 70% и больше. И никто этого не заметит.

Какой формат даёт наименьший размер файла?

Выбор формата имеет большее значение, чем вы думаете. Одна и та же фотография, сохранённая в разных форматах, может отличаться по размеру в 10 раз.

Вот как сравниваются основные форматы:

JPEG — классический выбор для фотографий. Он хорошо справляется с градиентами и цветами. При качестве 80 типичное фото занимает 200–400 КБ. Но JPEG не поддерживает прозрачность и ухудшается при каждом повторном сохранении.

PNG отлично подходит для графики, логотипов и скриншотов. Он использует сжатие без потерь, поэтому качество идеальное. Но для фотографий размеры файлов большие — часто 2–5 МБ.

WebP — современный оптимальный вариант. Он обеспечивает лучшее сжатие, чем JPEG, с поддержкой прозрачности. Та же фотография при том же визуальном качестве? WebP обычно на 25–35% меньше, чем JPEG. Все основные браузеры теперь его поддерживают.

AVIF идёт ещё дальше. Он может быть на 50% меньше JPEG при том же качестве. Поддержка браузерами быстро растёт. Если ваша аудитория использует современные браузеры, AVIF — лучший выбор для фотографий.

Быстрая рекомендация: переведите ваши веб-изображения в WebP. Это самое простое изменение с наибольшей отдачей.

Как изменить размер изображения, не сделав его размытым?

Изменение размера — самый быстрый способ уменьшить вес файла. Фотография 4000×3000 — это 12 миллионов пикселей. Уменьшите её до 1200×900, и у вас будет 1 миллион пикселей. Это сокращение данных на 92% ещё до начала сжатия.

Но при неправильном подходе изменение размера может сделать изображение размытым. Вот как сделать это правильно:

1. Уменьшайте, но никогда не увеличивайте. Увеличение маленького изображения просто добавляет размытые пиксели. Всегда начинайте с самой большой версии.
2. Используйте правильный алгоритм. Бикубическая или Ланцош-интерполяция сохраняет чёткие края. Метод ближайшего соседа делает изображение угловатым. Большинство хороших инструментов используют бикубический метод по умолчанию.
3. Подгоняйте под размер отображения. Проверьте, где будет показано изображение. Если на сайте оно отображается шириной 800 пикселей, не сохраняйте его в 4000 пикселей. Выбирайте 800 или, возможно, 1600 пикселей для экранов Retina.
4. Повышайте резкость после изменения размера. Лёгкий фильтр резкости (радиус 0.3–0.5) поможет восстановить чёткость, которую сглаживание немного снизило.

Для веб-изображений вот хорошие целевые значения ширины:

• Баннеры и hero-изображения: 1600–2000 пикселей
• Изображения в блоге: 800–1200 пикселей
• Миниатюры: 300–400 пикселей
• Соцсети: проверьте рекомендованные размеры каждой платформы

Какие инструменты реально помогают уменьшить размер файла?

У вас множество вариантов. Одни быстрые и простые. Другие дают тонкий контроль. Вот те, которые действительно стоят вашего внимания.

Онлайн-инструменты

CompressIMG выполняет весь процесс прямо в вашем браузере. Перетащите изображения, выберите качество и скачайте уменьшенные версии. Никакого программного обеспечения для установки. Поддерживает JPEG, PNG, WebP и AVIF. Вы можете ознакомиться с нашим честным сравнением с другими инструментами, чтобы увидеть, как он выглядит на фоне конкурентов.

Десктопные приложения

ImageOptim (Mac) и FileOptimizer (Windows) — отличные бесплатные варианты. Они удаляют метаданные и применяют умное сжатие в один клик.

Adobe Photoshop даёт полный контроль с функцией «Экспорт для Web». Вы можете предварительно просмотреть сжатую версию рядом с оригиналом и точно настроить параметры качества.

Инструменты командной строки

Для пакетной обработки инструменты командной строки трудно превзойти:

# Сжать все JPEG в папке с помощью mozjpeg
for file in *.jpg; do
  cjpeg -quality 80 "$file" > "compressed/$file"
done

# Конвертировать в WebP с помощью cwebp
for file in *.jpg; do
  cwebp -q 80 "$file" -o "${file%.jpg}.webp"
done

Инструменты сборки и CDN

Если вы ведёте сайт, стоит автоматизировать сжатие в процессе сборки. Инструменты вроде sharp (Node.js) или Pillow (Python) могут изменять размер и сжимать изображения при развёртывании. CDN-сервисы вроде Cloudflare и Imgix делают это на лету.

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

Какие настройки использовать для лучших результатов?

Общие настройки «просто сожми изображение» не дают оптимального результата. Вот что стоит настроить для каждого формата:

Настройки JPEG

• Качество: 80–85 для фотографий. Ниже 75 вы начнёте замечать артефакты вокруг краёв.
• Субдискретизация цветности: 4:2:0 для веб-фотографий. Это вдвое сокращает цветовые данные при почти незаметном изменении.
• Прогрессивный: Да. Прогрессивные JPEG загружаются поэтапно, сначала показывая размытый превью. Они также немного меньше по размеру.
• Удалить метаданные: Да. Уберите EXIF-данные, если вам не нужны GPS-координаты или информация о камере.

Настройки PNG

• Сокращение цветов. Если ваш PNG использует менее 256 цветов (например, логотип), конвертируйте его в 8-битный PNG. Одно это может уменьшить размер файла на 60%.
• Уровень сжатия: 9 (максимальный). Сжатие PNG всегда без потерь, так что максимальное сжатие означает лишь более медленное кодирование. Никаких компромиссов по качеству.

Настройки WebP

• Качество: 75–80 для сжатия с потерями. WebP эффективнее JPEG, поэтому более низкое значение всё равно даёт отличный результат.
• Метод: 6 для лучшего сжатия. Более высокие значения означают более медленное кодирование, но меньшие файлы.
• Без потерь: используйте для графики. WebP без потерь превосходит PNG по размеру файла для большинства изображений.

Настройки AVIF

• Качество: 60–70. AVIF настолько эффективен, что качество 65 часто соответствует JPEG при качестве 85.
• Скорость: 4–6. Меньшая скорость означает лучшее сжатие, но кодирование занимает больше времени.
• Битовая глубина: 8. Если вам не нужен HDR, 8 бит — это оптимально.

Можно ли уменьшить размер файла вообще без потери качества?

Да. Несколько приёмов уменьшают размер файла, не затрагивая ни одного пикселя:

1. Удалите метаданные. Уберите данные EXIF, IPTC и XMP. Обычно это 50–100 КБ на фотографию. Если вам не нужны данные о местоположении или авторских правах, встроенные в файл, смело удаляйте.

2. Оптимизируйте кодирование. Инструменты вроде jpegtran и optipng перекодируют существующие данные изображения более эффективно. Те же пиксели, файл меньше. Типичная экономия — 5–15%.

3. Удалите цветовые профили. Большинство браузеров игнорируют встроенные ICC-профили и используют sRGB. Удаление профиля экономит 3–5 КБ на изображение.

4. Используйте WebP без потерь. Конвертируйте ваши PNG в WebP без потерь. То же качество, в среднем на 26% меньше.

5. Обрежьте прозрачные края. Если в вашем PNG есть большие прозрачные области, обрежьте их. Пусть CSS управляет отступами.

Эти приёмы не дадут вам впечатляющей экономии в 70–90%, как сжатие с потерями. Но в совокупности они могут снять 20–30% от размера ваших файлов при абсолютно нулевом изменении качества.

Каких ошибок следует избегать при сжатии изображений?

Некоторые распространённые привычки на самом деле всё ухудшают:

Повторное сжатие файлов с потерями. Каждый раз, когда вы открываете JPEG, редактируете и сохраняете снова, качество падает. Всегда храните оригинал и сжимайте именно его.

Одинаковые настройки для всего. Фотография заката требует других настроек, чем скриншот таблицы. Фотографии хорошо переносят сжатие с потерями. Текст и чёткие края — нет.

Игнорирование размеров. Одно сжатие может сделать лишь ограниченное. Если ваше изображение шириной 4000 пикселей, а отображается в 400, сначала измените размер. Потом сжимайте.

Слишком агрессивное сжатие. Качество ниже 60% в JPEG создаёт заметные блочные артефакты. Соблазн выкрутить сжатие на максимум велик. Не делайте этого. Выигрыш в размере ниже качества 70 не стоит некрасивого результата.

Забыть про Retina. Если ваш сайт обслуживает дисплеи Retina, сохраняйте изображения в 2 раза больше размера отображения. Для слота 400 пикселей нужно изображение 800 пикселей. Учитывайте это в своих целевых размерах.

Больше подробностей о правильной оптимизации изображений для сайтов вы найдёте в руководстве как сжать изображения для сайта. Там описан весь процесс оптимизации от начала до конца.

Сколько реально можно сэкономить?

Вот как выглядит реальная экономия на примере типичного фото с телефона размером 6 МБ:

Метод	Размер файла	Экономия	Потеря качества
Оригинал (JPEG с камеры)	6,0 МБ	—	Нет
Удаление метаданных	5,9 МБ	2%	Нет
Уменьшение до 1600 пикселей	1,8 МБ	70%	Нет (если размер подходит)
JPEG, качество 80	420 КБ	93%	Едва заметная
WebP, качество 80	310 КБ	95%	Едва заметная
AVIF, качество 65	195 КБ	97%	Едва заметная

Это уменьшение в 30 раз — с 6 МБ до 195 КБ. И изображение по-прежнему отлично выглядит на экране.

Наибольший выигрыш дают изменение размера и выбор формата. Настройки сжатия — это уже вишенка на торте.

Для полного разбора того, как работает сжатие изображений изнутри, прочитайте наше полное руководство по сжатию изображений.

Готовы уменьшить ваши изображения?

Вам не нужно дорогое программное обеспечение или диплом по информатике. Выберите правильный формат, измените размер до нужных вам значений и сожмите при качестве 80. Это 90% успеха.

Хотите попробовать прямо сейчас? CompressIMG позволяет бесплатно уменьшить размер файлов прямо в вашем браузере. Перетащите изображения и увидите разницу за считанные секунды.