Обрезка изображений
Хорошее фото с неудачным краем или сайт, которому нужен квадрат, когда ваша картинка не квадратная. Перетащите файл сюда, наведите рамку на нужную часть и сохраните. Обрезку делает ваш браузер, так что ничего не загружается.
Снимок открывает и обрезает ваш собственный браузер. Он никуда не загружается и исчезает, когда вы закрываете страницу.
Что обрезка делает с пикселями
Изображение это сетка. Обрезка оставляет прямоугольник этой сетки и отбрасывает остальное, поэтому файл становится меньше, а объект крупнее в том месте, где картинка в итоге окажется. Внутри рамки ничего не меняется. Рамка шириной 1200 пикселей, вырезанная из фото в 4000 пикселей, это всё те же исходные 1200 пикселей, такие же чёткие.
Изменение размера это другая задача. Оно сохраняет весь кадр и перерисовывает его на меньшей сетке. Эта страница позволяет сделать и то, и другое за один раз. Рамка определяет, что вы оставляете, а «Итоговая ширина» определяет, сколькими пикселями. Оставьте это поле пустым, и вы получите рамку в её реальном размере.
В обратную сторону это не работает. Если запросить итоговую ширину больше рамки, браузер придумает недостающие пиксели, смешивая соседние, и картинка станет мягкой. Сразу обрезайте с запасом по ширине.
Какая форма куда подходит
Большинство мест, где показывают вашу картинку, уже решили, какой она будет формы. Дайте им другую, и они обрежут её сами, обычно посередине чьего-то лба. Если форму выбираете вы, вы и решаете, что отрезать.
| Форма | Где подходит | Хороший размер |
|---|---|---|
| 1:1 | Аватарки, миниатюры товаров, квадратные посты. | 1080 × 1080 |
| 4:5 | Вертикальные посты в ленте. Самая высокая форма, которую большинство лент показывают без обрезки. | 1080 × 1350 |
| 16:9 | Обложки видео, слайды, широкие баннеры. | 1920 × 1080 |
| 9:16 | Сторис и короткие вертикальные видео, на весь экран телефона. | 1080 × 1920 |
| 1.91:1 | Карточка, которая появляется, когда делятся ссылкой. | 1200 × 630 |
| 3:2 и 4:3 | То, что снимают камеры и телефоны. Подходит для статей и печати. | 1600 в ширину |
Для карточки ссылки мало правильной картинки. Страница должна ещё и объявить её, а проверка превью ссылок показывает, что нарисует каждая сеть.
Что здесь происходит с вашим файлом
- Браузер декодирует картинку и применяет поворот, сохранённый камерой, чтобы вертикальный снимок стоял прямо.
- К этой картинке применяются повороты и отражения. Они точные, потому что поворот на четверть оборота только переставляет пиксели и не перерисовывает их.
- Вы ставите рамку, перетаскивая её, потянув за угол или край или введя её положение и размер в пикселях. Когда рамка выбрана, клавиши со стрелками сдвигают её на один пиксель, с Shift на десять.
- Когда вы нажимаете «Обрезать», область в рамке рисуется на canvas в итоговом размере и кодируется в выбранный формат.
Новый файл собирается из пикселей и больше ни из чего. Блок EXIF оригинала, GPS-координаты, модель камеры и встроенная миниатюра остаются позади. Последнее важнее, чем кажется. Некоторые программы обрезают картинку и сохраняют старую миниатюру, на которой по-прежнему видна часть, которую вы хотели убрать.
Выбор формата
«Как у оригинала» это надёжный выбор, когда картинка возвращается туда, откуда пришла. В остальных случаях:
- WebP для всего, что идёт на сайт. Заметно меньше JPEG при том же виде и сохраняет прозрачность.
- JPEG, когда место назначения капризное: форма загрузки образца 2012 года, типография или письмо на чей-то рабочий компьютер. Прозрачные области становятся белыми.
- PNG для скриншотов, логотипов и рисунков с плоскими цветами. Он без потерь, поэтому фотография, сохранённая в PNG, получается в несколько раз тяжелее.
Качество 85 хорошая отправная точка для JPEG и WebP. Если файл должен быть как можно меньше или вам нужен AVIF, обрежьте здесь в PNG и пропустите результат через сжатие изображений. Так картинка будет сжата только один раз.
Частые вопросы
Загружается ли моя картинка на сервер при обрезке?
Нет. Ваш браузер открывает, обрезает и сохраняет файл на вашем устройстве. Можно загрузить эту страницу, отключить сеть, и всё будет работать.
Ухудшает ли обрезка качество фото?
Сама обрезка не трогает оставленные пиксели. Сохранение в JPEG или WebP сжимает их снова, и каждый раз это немного стоит, так что обрезайте из оригинала и старайтесь не обрезать один и тот же файл снова и снова. Сохранение в PNG ничего не теряет.
Как обрезать картинку до точного размера, например 1200 × 630?
Выберите подходящую форму (1.91:1 для 1200 × 630), поставьте рамку, затем введите 1200 в поле «Итоговая ширина». Высота следует из формы. Для размера без подходящей формы оставьте форму «Свободная» и введите ширину и высоту рамки в пикселях.
Сохраняется ли в обрезанном файле место, где было сделано фото?
Нет. Из метаданных оригинала ничего не копируется. Если вы собираетесь поделиться фото без обрезки и хотите знать, что в нём есть, откройте его в удалении EXIF из фото.
Можно ли обрезать прозрачный PNG и сохранить прозрачность?
Да, если сохранять в PNG или WebP. В JPEG нет прозрачности, поэтому прозрачные области заливаются белым.
Что будет с анимированным GIF?
Вы получите первый кадр как статичную картинку. Эта страница не обрезает анимации.