Сначала обрезка, потом размер, потом сжатие
Порядок важен, и обрезка — первый шаг. Она решает, что изображено; изменение размера решает, насколько оно большое; сжатие решает, сколько это весит. В таком порядке каждый шаг работает с наименьшим корректным входом.
В обратном порядке — сжать, потом обрезать — вы выбрасываете детали, которые всё равно уйдут в обрезку, и повторно кодируете то, что осталось.
Соотношения, которые важны
| Соотношение | Где требуется | | --- | --- | | 1:1 | Аватары, сетки товаров, иконки приложений | | 16:9 | Обложки видео, презентации, большинство экранов | | 4:3 | Печатные макеты, старые дисплеи | | 1,91:1 | Изображения карточек Open Graph и Twitter | | 9:16 | Вертикальное видео и сторис |
Обрезать под соотношение самому лучше, чем доверить это площадке: её автоматическая обрезка идёт по центру, а сюжет фотографии там оказывается редко.
Работайте с оригиналом
Любая обрезка необратима — удалённые пиксели в результат не попадают. Храните оригинал и обрезайте каждый раз от него, а не обрезку от обрезки: иначе накапливаются и решения по кадрированию, и, в случае JPEG, потери при кодировании.
Вопросы
Теряется ли качество при обрезке?+
Оставшиеся пиксели не трогаются: обрезка удаляет площадь, а не пересчитывает пиксели. Единственная оговорка — формат: JPEG приходится перекодировать при сохранении, и это добавляет одно поколение потерь. У PNG и WebP без потерь такого нет.
Что делают пресеты соотношений?+
Они привязывают высоту к ширине, чтобы обрезка попала в нужную форму. Полезно, когда у результата фиксированное место: 1:1 для аватаров и сеток товаров, 16:9 для обложек видео, 1,91:1 для карточек соцсетей.
Можно обрезать несколько картинок по одной рамке?+
За один проход — нет: инструмент работает с одним изображением, потому что фиксированная рамка редко подходит нескольким фотографиям с разными сюжетами. Если нужно привести набор к одному размеру, а не к одной обрезке, берите [изменение размера](/ru/t/image-resizer).
Что происходит с прозрачностью?+
Она сохраняется для PNG и WebP. У исходника в JPEG её нет, а если формат обязан стать JPEG, прозрачная область заливается белым.