Редактор изображений
Бросьте одну картинку или целую пачку. Обрежьте, поверните, превратите в WebP (или во что там ваша CMS хочет на этой неделе) и посмотрите, сколько килобайт сэкономили.
Работает в вашем браузере. Всё, что вы сюда вставляете или бросаете, никуда не загружается.
Клавиши: V C P L A F T Z G выбирают инструмент (выбор, обрезка, карандаш, линия, стрелка, рамка, текст, лупа, поля), Shift выравнивает линии и делает рамку квадратной, точка на краю лупы (или + −, или колесо) меняет увеличение, Enter применяет обрезку или поля или завершает фигуру, Esc отменяет, Ctrl/⌘ Z откатывает шаг. Когда фокус на рамке обрезки, ← → ↑ ↓ двигают её (Shift по 10 px), Alt/Option + стрелки меняют размер.
Картинок пока нет. Перетащите их выше или возьмите пример.
Как пользоваться
- Перетащите картинки в рамку, кликните, чтобы выбрать файлы, или вставьте скриншот через Ctrl/⌘ V. Можно несколько сразу.
- Они выстроятся в ленту внизу. Кликните по картинке, чтобы открыть её в редакторе.
- Выберите пропорции (1:1, 16:9, 4:5 для Instagram…) или оставьте Свободно. Тяните углы, двигайте рамку за середину или введите точные
X,Y,W,Hв пикселях, затем нажмите Применить. Поверните или отразите, если фото пришло боком. - Выберите инструмент (карандаш, линия, стрелка, рамка, текст или лупа), чтобы что-то отметить, а инструментом полей положите картинку на цветной фон, для скриншотов самое то; Применить ставит их для всех картинок. Фигуры можно поправлять, пока не нажмёте Готово. Ctrl/⌘ Z отменяет.
- Справа выберите формат, качество и размер. Они действуют на все картинки, и каждая переконвертируется сразу при изменении, с весом до и после.
- Отметьте несколько картинок в ленте, чтобы повернуть или отразить их вместе. Скачайте ту, что редактируете, или все (или только отмеченные) в
.zip.
Что он делает
Всё происходит на <canvas> в этой вкладке. Картинки никуда не загружаются, так что можно спокойно обрабатывать скриншоты, которые не хочется отправлять на чужой сервер. Читается всё, что умеет читать ваш браузер: PNG, JPEG, WebP, AVIF, GIF (только первый кадр), BMP и SVG. HEIC с iPhone откроется только там, где браузер сам его понимает, в основном в Safari.
Превью, по которому вы тянете рамку, может быть уменьшено под экран, но экспорт вырезается из оригинала в полном разрешении. Фото 6000 × 4000, обрезанное до 1:1, получится 4000 × 4000, а не размером с ваш ноутбук.
Фото с телефона сначала разворачиваются по EXIF-ориентации. Результат кодируется заново, поэтому EXIF, данные камеры и GPS-координаты не переживают поездку, и это удобно перед публикацией. Обратная сторона: цветовые профили переводятся в sRGB, поэтому фото с широким охватом могут стать чуть площе.
Форматы на выходе зависят от браузера. При загрузке инструмент пробует закодировать крошечную картинку и выключает форматы, которые не сработали: браузеры молча возвращают PNG, если не умеют то, что просили. PNG и JPEG работают всегда. WebP работает в браузерах на Chromium. AVIF из canvas в Chrome 154 при моей проверке не кодировался, так что пока он, скорее всего, будет серым.
Файл может и вырасти. Скриншот с плоскими цветами часто меньше всего в PNG, а пересохранение маленького JPEG с качеством 90 может его раздуть. Инструмент прямо об этом скажет.
Вопросы
Картинки загружаются на сервер?
Нет. Декодирование, обрезка, изменение размера и кодирование происходят во вкладке браузера, и файлы для скачивания создаются локально. Можно открыть страницу, отключить интернет, и всё продолжит работать.
Обрезка ухудшает качество?
Сама обрезка нет: пиксели внутри рамки копируются как есть. Качество меняется, только если сохранить в JPEG, WebP или AVIF с качеством ниже 100 или уменьшить размер. Нужно без потерь, выбирайте PNG.
Какой размер у обрезки 4:5 для Instagram?
Обычный вертикальный пост в Instagram: 1080 × 1350 пикселей, это 4:5. Выберите 4:5, наведите кадр и в Размер поставьте Макс. ширина 1080, если оригинал больше.
Как обрезать картинку до точного размера, например 1200 × 630?
Выберите пропорции Свои и впишите 1200 и 630, поставьте рамку на нужную часть, затем в Размер выберите Макс. ширина и 1200. Макс. ширина только уменьшает, если не отметить Разрешить увеличение, так что рамка должна захватывать хотя бы 1200 пикселей оригинала; растянутая картинка получится мыльной. 1200 × 630 — обычный размер картинки для превью ссылки (Open Graph).
Что происходит с прозрачными местами?
PNG, WebP и AVIF их сохраняют. В JPEG прозрачности нет, поэтому прозрачные места заливаются выбранным цветом фона, по умолчанию белым.
Почему нельзя выбрать AVIF или WebP?
Потому что ваш браузер не умеет кодировать этот формат из canvas. Показывать и сохранять это разные вещи: Chrome прекрасно показывает AVIF, но, как минимум до Chrome 154, сохранять его не умеет. Попробуйте другой браузер или WebP, он даёт большую часть выигрыша.
WebP меньше, чем JPEG?
Обычно да: при похожем визуальном качестве фото в WebP заметно легче, чем в JPEG. Но не всегда, поэтому инструмент показывает реальные цифры для вашего файла, а не обещания.
Удаляются ли EXIF и GPS?
Да. Результат кодируется заново из пикселей canvas, поэтому EXIF, GPS-координаты и данные камеры не копируются. Ориентация применяется к пикселям заранее, так что фото не ложатся набок.
Как конвертировать HEIC в JPG?
Откройте эту страницу в Safari, бросьте фото HEIC и выберите JPEG. Safari умеет читать HEIC, так что дальше всё работает как с любой другой картинкой. Chrome и Firefox обычно не умеют, и инструмент прямо об этом скажет, а не сломается молча. Другие пути: на Mac откройте фото в «Просмотре» и выберите Файл → Экспортировать; на iPhone включите Настройки → Камера → Форматы → Наиболее совместимый, и камера начнёт сохранять JPEG.