Обрезка изображений

Зачем на практике кадрируют картинки

Обычная картинка редко подходит под нужный размер с первого раза. Фотография с телефона приходит в портретной ориентации, а для аватарки нужен квадрат. Скриншот содержит пол-экрана, который никому не нужен. Баннер на сайте рассчитан на конкретное соотношение сторон, а фотография получилась горизонтальной. В таких случаях открывают редактор, который умеет намного больше, чем требуется, и тратят на это несколько минут ради одного прямоугольника.

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

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

• Аватарка под квадратный формат, который требует сервис или соцсеть.
• Обрезка лишнего с краёв фотографии перед публикацией.
• Вырезание нужного фрагмента из скриншота или из скана документа.
• Подгонка баннера или обложки под заданное соотношение сторон.
• Кадрирование фотографии под квадрат в печатном коллаже или в сетке.
• Вырезание области, где на изображении нет ничего лишнего, для отправки клиенту.
• Подготовка версии изображения, в которой обрезаны метаданные и лишний кадр.
• Быстрая замена части макета при вёрстке страницы.

Ошибки, из-за которых кадр получается не тем

Первая ошибка связана с пропорциями. Если вы выделили прямоугольник, а потом сменили пресет на 16:9, ширина выделения сохраняется, а высота пересчитывается, и рамка может уехать за край изображения или накрыть лишнее. Всегда проверяйте числовые поля X, Y, ширины и высоты после смены пресета, они показывают точные пиксели исходника, а не то, что видно на экране.

Вторая ошибка связана с тем, что картинка на экране показывается уменьшенной. Перетаскивая рамку по превью, легко потерять точность: один пиксель на экране может соответствовать нескольким пикселям оригинала. Для точной работы ориентируйтесь на поля с числами, они считаются в натуральных пикселях изображения, и поправьте рамку в них. Пока вы не нажали «Обрезать», ничего не применяется, результат появляется только после нажатия.

Третья ошибка, о которой стоит знать заранее, связана с метаданными и ориентацией. Современные браузеры применяют EXIF-поворот при показе фотографии, и обрезка идёт по уже развёрнутому изображению. Если картинка после кадрирования получилась повёрнутой, значит в файле был нестандартный флаг ориентации, который браузер проигнорировал. Отдельно стоит помнить, что при экспорте в PNG служебные данные, включая геометку, в результат не попадают, что для публикации скорее плюс. Формат выходного файла и его вес можно затем подправить через сжатие изображений.

• Смена пресета пропорций после того, как рамка уже выделена. Проверяйте поля с числами.
• Ориентация на глаз по уменьшенному превью вместо полей с пикселями.
• Ожидание, что обрезка изменит размер файла. Кадрирование не сжимает данные.
• Попытка выделить область больше, чем есть в изображении. Рамка упирается в границы.
• Расчёт на то, что в PNG сохранятся метаданные камеры и геолокация. Они не сохраняются.
• Путаница между натуральными пикселями и размером, показанным на экране.
• Обрезка до того, как файл полностью загрузился, из-за чего рамка встаёт не туда.
• Ожидание, что получится сжатый JPEG. Результат сохраняется в PNG без потерь.

Как устроено кадрирование и что важно знать

Порядок работы простой и целиком в браузере. Файл читается как объект, из него создаётся временная ссылка, по которой браузер декодирует картинку и сообщает её натуральный размер. Затем вычисляется масштаб показа, то есть отношение ширины картинки на экране к её реальной ширине. Все координаты рамки хранятся в натуральных пикселях и пересчитываются в экранные только для отрисовки, поэтому результат не зависит от размера окна.

При нажатии «Обрезать» создаётся canvas размером ровно с выделенной областью, и на него переносится нужный прямоугольник оригинала. Полученное изображение сохраняется в PNG, а в имя файла добавляются размеры, например `photo-cropped-800x600.png`. Никакой перерисовки с интерполяцией на этом шаге нет, поэтому пиксели выбранной области переносятся один в один и качество не теряется. Обратный переход из PNG в JPEG, если он понадобится, делается уже отдельным инструментом.

Стоит знать про ограничения. Анимированные GIF и APNG показываются в браузере только первым кадром, и в результат попадёт именно он. Очень большие изображения упираются в ограничения браузера на размер canvas, и при попытке вырезать область из снимка на десятки тысяч пикселей по стороне загрузка может не пройти. Зато снимки экрана с обычным разрешением, фотографии с камеры и картинки из социальных сетей обрабатываются без проблем.

Все размеры приведены как ориентир: конкретные требования площадок меняются, и перед загрузкой стоит свериться с их справкой.

Обрезка, изменение размера и другие способы

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

Для веса и формата есть отдельный инструмент, который умеет конвертировать в JPEG, PNG и WebP и показывает экономию в процентах. Выбор между ними обычно сводится к простому правилу: фотографии отправляют в WebP или JPEG, а картинки с прозрачностью, скриншоты и схемы оставляют в PNG. Если вам нужно просто привести картинку к нужным габаритам без кадрирования, изменение размера изображений справится быстрее.

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

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

Несколько приёмов на каждый день

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

• Задайте пресет пропорций до выделения, иначе рамку придётся пересчитывать заново.
• Смотрите на поля X, Y, ширины и высоты, они показывают натуральные пиксели, а не экранные.
• Увеличьте область до границ картинки, а не пытайтесь вытянуть её за пределы: инструмент всё равно урежет.
• Помните, что до нажатия «Обрезать» ничего не применяется, результат появляется только после.
• Держите оригинал: обрезка не уменьшает вес файла, а кадрирование JPEG даёт PNG.
• Для анимации и многостраничных файлов инструмент не подходит: в результат попадёт только первый кадр.
• Проверьте, не попало ли в кадр то, что не должно туда попасть, до загрузки результата.