CodeariaAcademy
Мастерская

$ open workshop/image-prep

● работает в браузере · без загрузки на сервер

Кадрирование и конвертация

Кадр, размер и формат

Рамку можно двигать и тянуть за углы, поэтому в кадр попадает то, что нужно, а не центр картинки. Один раз навели — и «все пресеты» отдадут четыре готовых кадра вокруг той же точки. Всё считается в браузере: перерисовка через canvas оставляет только пиксели, поэтому C2PA, EXIF и XMP исчезают сами.

или выберите файл, или вставьте из буфера

JPG, PNG, WebP, AVIF · до 25 МБ

Файл не покидает ваш компьютер

Обрезать картинку под превью и конвертировать в WebP

Загрузите изображение, наведите рамку на нужную часть кадра и заберите результат в WebP, JPG или PNG. Обработка идёт в браузере через canvas: файл не уходит на сервер, а C2PA, EXIF и XMP исчезают сами, потому что в новый файл попадают только пиксели.

Как пользоваться

  1. 1Перетащите картинку в окно или вставьте из буфера клавишами Ctrl+V
  2. 2Выберите размер: готовый пресет, свой в пикселях или «как есть» без обрезки
  3. 3Наведите рамку: тяните за углы, двигайте за середину, стрелки сдвигают по пикселю
  4. 4Выберите формат и качество, затем скачайте файл или скопируйте картинку

Что внутри

Обложка статьи
1600 × 900
OG-превью ссылки
1200 × 630
Telegram
1280 × 720
Квадрат
1080 × 1080
Форматы на выходе
WebP, JPG, PNG
Предел файла
25 МБ

Частые вопросы

Картинка загружается на сервер?

Нет. Файл читается браузером и перерисовывается через canvas на вашем устройстве. Ни одного сетевого запроса с изображением не происходит, поэтому инструмент работает и без интернета после загрузки страницы.

Правда ли срезаются метаданные ИИ-генератора?

Да, и это следствие способа обработки, а не отдельная функция. Canvas отдаёт чистый массив пикселей, а манифест C2PA, EXIF и XMP живут в контейнере файла и в новый файл просто не переносятся.

Чем WebP лучше JPG для превью?

При одинаковом качестве WebP обычно весит вдвое меньше и поддерживает прозрачность. JPG стоит брать, когда файл уходит в старую CMS или клиенту, который просит именно его, PNG — когда нужна прозрачность без потерь.

Можно конвертировать, не обрезая?

Да, выберите размер «как есть». Кадр останется исходным, поменяется только формат файла, а метаданные всё равно будут срезаны.

Другие приложения

Вся мастерская
Анимированные компоненты для ReactCodearia FrontendАнимированные компоненты для React и Tailwind с готовым кодомПромпты для моушн-видео с примерамиБиблиотека моушн-промптовПромпты для моушн-графики в Claude: примеры с видеоMCP-серверы для Claude Code, Cursor и VS CodeГенератор конфига MCPКак подключить MCP-сервер к Claude Code, Cursor и VS CodeCLAUDE.md, права и скиллы под ваш проектКонструктор CLAUDE.mdКак написать CLAUDE.md для своего проектаОшибка простыми словами и промпт для починкиРазбор ошибкиЧто значит эта ошибка и как попросить Claude Code её исправитьМногослойные фоны на чистом CSSЛаборатория градиентовКрасивый градиентный фон для сайта на чистом CSSНевидимые символы из моделейЧистка текстаУбрать невидимые символы из текста после нейросетиСчёт за то, что вокруг моделиЦена обвязкиСколько стоит стартовый контекст Claude Code и MCP-серверов