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

Изменение размера изображений — одна из самых распространённых задач в цифровом дизайне, но она остаётся источником путаницы и разочарования. Готовите ли вы фотографии продуктов для интернет-магазина, оптимизируете ли изображения для сайта или создаёте материалы для печати, понимание того, как изменение размера работает на уровне пикселей, является ключом к сохранению визуального качества. Это руководство охватывает всё, что нужно знать об изменении размера изображений без внесения размытия, артефактов или искажений.

Понимание разрешения и DPI

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

Разрешение относится к общему количеству пикселей в изображении, выражаемому как ширина на высоту (например, 4000 x 3000 пикселей). Это фактическое количество визуальных данных, содержащихся в изображении. Более высокое разрешение означает больше деталей и больший размер файла.

DPI (точек на дюйм) или PPI (пикселей на дюйм) описывает, насколько плотно пиксели упакованы при отображении или печати изображения. Изображение шириной 3000 пикселей, напечатанное с разрешением 300 DPI, будет 10 дюймов в ширину. То же изображение, напечатанное с разрешением 150 DPI, будет 20 дюймов в ширину. Количество пикселей не меняется, меняется только физический размер вывода.

Разрешение для Web и печати

Изменение размера без потерь и с потерями

Не все изменения размера одинаковы. Подход, который вы выбираете, зависит от того, уменьшаете ли вы изображение (downsampling) или увеличиваете (upsampling), и результаты значительно различаются.

Уменьшение: безопасное направление

С точки зрения качества уменьшение размера изображения обычно безопасно. При уменьшении вы отбрасываете пиксельные данные, но оставшиеся пиксели представляют точное среднее исходной информации. Изображение шириной 4000 пикселей, уменьшенное до 800 пикселей, будет выглядеть чётким и детальным, потому что у вас больше исходных данных, чем нужно. Алгоритм интерполяции определяет, как усредняются отброшенные пиксели, и современные алгоритмы справляются с этим исключительно хорошо.

Увеличение: проблемное направление

Увеличение изображения принципиально иное. Вы просите программное обеспечение создать пиксели, которых не существовало в исходном изображении. Традиционное увеличение использует интерполяцию, чтобы угадать, как должны выглядеть отсутствующие пиксели, что неизбежно приводит к мягким, размытым или пикселизированным результатам. Чем больше коэффициент увеличения, тем хуже результат.

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

Сравнение алгоритмов интерполяции

• Ближайший сосед: самый быстрый метод. Просто копирует значение ближайшего пикселя. Даёт блочные, пикселизированные результаты. Подходит только для пиксель-арта и скриншотов, где нужно сохранить жёсткие края без сглаживания.
• Билинейная: вычисляет взвешенное среднее четырёх ближайших пикселей. Быстрее бикубической, но даёт более мягкие результаты. Подходит для быстрых предпросмотров, но не для финального вывода.
• Бикубическая: использует окрестность пикселей 4x4 для вычислений. Даёт более чёткие результаты, чем билинейная, с более плавными градиентами. Используется по умолчанию в большинстве редакторов изображений и является хорошим универсальным выбором.
• Lanczos: математически использует функцию sinc для выборки из более широкой области (обычно 8x8 пикселей). Даёт самые чёткие результаты с наименьшим количеством ступенчатости. Обычно считается лучшим методом как для увеличения, так и для уменьшения. Используется высококачественными инструментами, такими как ImageMagick и режим «Сохранить детали» в Photoshop.
• AI/Нейросеть: использует модели глубокого обучения, обученные на наборах данных изображений, для предсказания отсутствующих деталей. Лучше всего подходит для увеличения, особенно фотографий. Может давать результаты, которые выглядят так, будто добавляют детали, отсутствующие в исходном изображении.

Лучшие инструменты и методы изменения размера

Инструмент, который вы выбираете, так же важен, как и техника. Разное программное обеспечение использует разные алгоритмы интерполяции по умолчанию, и некоторые предлагают больше вариантов контроля.

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

Для быстрых задач изменения размера онлайн-инструменты удобны и не требуют установки. Наш инструмент изменения размера изображений позволяет изменять размер изображений прямо в браузере без загрузки, поскольку вся обработка происходит локально на вашем устройстве. Это означает, что ваши изображения никогда не покидают ваш компьютер, что важно для конфиденциальности и скорости.

Десктопное ПО

• Adobe Photoshop: отраслевой стандарт. Предлагает несколько методов интерполяции (ближайший сосед, билинейная, бикубическая, бикубическая сглаженная, бикубическая резкая и «Сохранить детали 2.0» с AI). Опция передискретизации «Сохранить детали 2.0» использует машинное обучение для превосходных результатов увеличения.
• GIMP: бесплатная альтернатива Photoshop с открытым исходным кодом. Поддерживает интерполяцию Cubic, Linear, NoHalo и LoHalo. NoHalo и LoHalo — реализации алгоритма Nohalo в GIMP, дающие отличные результаты как для увеличения, так и для уменьшения.
• ImageMagick: инструмент командной строки, предлагающий максимальный контроль над интерполяцией. Поддерживает фильтры Lanczos, Mitchell, Catrom и многие другие. Идеально подходит для пакетной обработки и автоматизации.
• Topaz Gigapixel AI: специализированный инструмент увеличения на основе AI, который может увеличивать изображения до 600% с впечатляющим восстановлением деталей. Лучший выбор для увеличения фотографий, но требует платной лицензии.

Изменение размера из командной строки с ImageMagick

Для разработчиков и опытных пользователей ImageMagick обеспечивает точный контроль над процессом изменения размера:

• Изменение до точного размера: convert input.jpg -resize 800x600 output.jpg
• Изменение с сохранением соотношения сторон: convert input.jpg -resize 800x output.jpg (ширина фиксирована, высота автоматически)
• Изменение с фильтром Lanczos: convert input.jpg -filter Lanczos -resize 800x600 output.jpg
• Изменение только при большем размере: convert input.jpg -resize 800x600> output.jpg (только уменьшение, никогда не увеличивает)

Изменение размера для Web и печати

Требования к Web и печатным изображениям принципиально разные, и понимание этих различий необходимо для получения правильных результатов.

Изменение размера Web-изображений

Для Web-изображений ваша цель — предоставить наименьший файл, который выглядит чётким при целевом размере отображения. Это означает изменение размера изображений до их отображаемого размера перед загрузкой. Распространённая ошибка — загрузка изображения шириной 6000 пикселей, которое отображается только шириной 600 пикселей, что тратит пропускную способность и замедляет загрузку страницы.

При изменении размера для Web следуйте этим рекомендациям:

• Изменяйте размер до точного отображаемого размера или максимального размера, необходимого для адаптивных контрольных точек
• Используйте интерполяцию Lanczos или бикубическую для самых чётких результатов
• Применяйте сжатие после изменения размера, а не до
• Рассмотрите создание нескольких размеров для srcset, чтобы обслуживать разные разрешения экрана
• Для дисплеев Retina создавайте изображения в 2 раза больше отображаемого размера (изображение 800px для области отображения 400px)

Изменение размера изображений для печати

Печать на мелованной бумаге требует не менее 300 DPI для высокого качества вывода, хотя 240 DPI часто приемлемо для немелованной бумаги. Ключевой расчёт прост: умножьте желаемый размер печати (в дюймах) на требуемое DPI, чтобы получить минимальные размеры в пикселях.

Например, чтобы напечатать фотографию 8x10 дюймов с разрешением 300 DPI, вам нужно изображение не менее 2400 x 3000 пикселей. Если ваше исходное изображение меньше, вам придётся увеличивать, что ухудшит качество печати. Всегда лучше начинать с исходного изображения более высокого разрешения, чем увеличивать для печати.

Сохранение соотношения сторон

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

Распространённые соотношения сторон

Как сохранить соотношение сторон

При изменении размера всегда ограничивайте пропорции. В большинстве редакторов изображений это означает удержание клавиши Shift при перетаскивании угловых маркеров или установку флажка «Сохранить соотношение сторон» в диалоге изменения размера. Математическое соотношение простое: если вы знаете новую ширину, новая высота вычисляется как Новая высота = (Новая ширина / Исходная ширина) * Исходная высота.

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

Советы по пакетному изменению размера

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

Лучшие практики пакетного изменения размера

• Используйте согласованное соглашение об именовании: добавляйте индикатор размера к имени файла (например, photo-800x600.jpg, photo-thumbnail.jpg), чтобы легко идентифицировать разные версии.
• Подгоняйте, а не заполняйте: при пакетном изменении размера изображений с разными соотношениями сторон используйте «подогнать по размеру», а не «растянуть до заполнения». Это сохраняет соотношение сторон, возможно, добавляя заполнение, но предотвращает искажения.
• Устанавливайте максимальные размеры: вместо указания точных размеров установите максимальную ширину или высоту и позвольте другому измерению масштабироваться пропорционально. Это элегантно обрабатывает смешанные соотношения сторон.
• Сначала тестируйте на образце: перед обработкой сотен изображений измените размер небольшой выборки и проверьте правильность результатов. Проверьте на неожиданные искажения, сдвиги цвета или артефакты сжатия.
• Сохраняйте исходные файлы нетронутыми: всегда сохраняйте изменённые копии в отдельную директорию. Никогда не перезаписывайте исходные файлы, так как в будущем могут понадобиться версии разных размеров.
• Используйте скрипты для автоматизации: ImageMagick, Sharp (Node.js) и Pillow (Python) поддерживают пакетную обработку. Простой скрипт может изменить размер тысяч изображений за минуты.

Пакетное изменение размера с ImageMagick

Чтобы изменить размер всех JPEG-изображений в директории до максимальной ширины 800 пикселей с сохранением соотношения сторон:

mogrify -path ./resized -resize 800x -quality 85 *.jpg

Эта команда обрабатывает все файлы JPEG, сохраняет изменённые версии в директорию resized и сохраняет исходное соотношение сторон с настройкой качества 85.

Распространённые ошибки, которых следует избегать

• Увеличение с ожиданием идеального качества: ни один алгоритм не может создать детали, которых не было в исходном изображении. Если вам нужно большее изображение, начните с исходного изображения более высокого разрешения, когда это возможно.
• Многократное изменение размера: каждая операция изменения размера вносит ошибки интерполяции. Если вы изменяете размер уже изменённого изображения, ошибки накапливаются. Всегда изменяйте размер от оригинала до целевого размера за один шаг.
• Игнорирование соотношения сторон: даже небольшие изменения соотношения сторон могут вызвать видимые искажения. 5% растяжение заметно на лицах и тексте. Всегда блокируйте пропорции при изменении размера.
• Использование неправильного метода интерполяции: ближайший сосед даёт блочные результаты для фотографий, в то время как бикубическая сглаженная делает пиксель-арт размытым. Сопоставляйте алгоритм с типом контента.
• Изменение размера после добавления текста или наложений: текст и векторные наложения следует добавлять после изменения размера, а не до. Изменение размера растрированного текста даёт размытые, нечитаемые результаты. Держите текстовые слои отдельно и добавляйте их при финальном размере.
• Отсутствие повышения резкости после уменьшения: уменьшение естественно смягчает изображения, поскольку интерполяция усредняет значения пикселей. Применение тонкого фильтра повышения резкости после уменьшения может восстановить воспринимаемую чёткость. Большинство профессиональных рабочих процессов включают этап повышения резкости после изменения размера.
• Сохранение изменённых изображений с максимальным качеством: если вы изменяете размер для Web, нет необходимости сохранять с качеством 100. Визуальная разница между качеством 85 и 100 незначительна, но разница в размере файла может превышать 50%.