Сжатие изображений

Что такое компрессор изображений?#

Этот инструмент уменьшает размер файла изображения путём перекодирования через браузерный конвейер Canvas — с более низким качеством, в другом формате или до меньшего размера в пикселях, в любой выбранной вами комбинации. На выходе получается новый файл, который можно скачать, а сравнение размеров «до/после» делает компромисс наглядным. Это повседневное решение «эта фотка слишком велика для вложения», выполняемое локально, без загрузки на сервер.

Доступны три рычага, и они сочетаются:

• Формат вывода — JPEG (с потерями, непрозрачный), WebP (с потерями, современный, примерно на 25–35 % меньше JPEG при том же качестве) или PNG (без потерь; уменьшается только через ресайз, никогда — через потерю качества).
• Качество — ползунок 5–100, соответствующий настройке качества кодировщика. Применяется только к JPEG и WebP; для PNG ползунок скрыт, потому что PNG по своей природе не может терять качество.
• Макс. ширина / высота — необязательные ограничения, масштабирующие изображение вниз (с сохранением соотношения сторон, без увеличения) перед кодированием. Ресайз — крупнейший выигрыш в размере для фотографий.

Поскольку работа идёт на <canvas> через createImageBitmap и canvas.toBlob, ваше изображение декодируется, преобразуется и перекодируется в памяти; исходный файл остаётся нетронутым.

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

1. Перетащите изображение в пунктирную зону.
2. В ряду управления выберите:
   • Формат вывода — по умолчанию берётся исходный тип для PNG/WebP, для всего остального — JPEG.
   • Макс. ширина / Макс. высота — оставьте пустым для «авто» (без ресайза) либо введите ограничение в пикселях. Изображение вписывается в рамку без искажений.
   • Качество — перетащите ползунок (5–100); текущее значение отображается рядом. Для PNG игнорируется.
3. Нажмите Сжать. Панель статистики показывает Оригинал, Сжато и Экономия (в байтах и процентах), а также уведомление, если результат внезапно оказался больше.
4. Скачать сжатый файл. Превью показывает результат, чтобы вы могли оценить визуальное качество.

Ключевые возможности#

• Учитывающий формат выбор по умолчанию. PNG остаётся PNG (прозрачность и резкие переходы выживают); для фотографий по умолчанию берётся JPEG; инструмент никогда молча не уничтожает альфа-канал.
• Сохраняющий пропорции ресайз. Максимальные ширина и высота задают описывающий прямоугольник; изображение вписывается в него с сохранением соотношения и никогда не увеличивается.
• Честная отчётность о размере. Когда перекодирование даёт файл больше оригинала (типично для PNG-в-PNG или уже крошечного JPEG), инструмент прямо об этом сообщает вместо видимости сэкономленного места.
• Вывод в WebP. Современные браузеры дают ещё 25–35 % выигрыша относительно JPEG при том же визуальном качестве; удобно для веб-ассетов.
• Локальный конвейер. Кодирование выполняют API Canvas; ничего не загружается.

Разбор примера#

Фотография с телефона размером 4,5 MiB при 4032×3024 слишком велика для отправки по почте. Перетащите её, задайте Формат вывода — WebP, Макс. ширина — 1920 (высота автомасштабируется до 1440), Качество — 80. Нажмите Сжать. Панель статистики покажет:

Большую часть работы выполнил ресайз (примерно в 4× меньше пикселей); WebP на качестве 80 добил остальное. Результат — меньше полумегабайта, визуально неотличимый на экране.

Тот же исходник, сохранённый как PNG на качестве 100 без ресайза, напротив, обычно выдаёт сжатый файл больше оригинала — PNG не умеет отбрасывать шум фотографии так, как JPEG или WebP. Инструмент помечает это уведомлением «больше», а не делает вид, что сэкономил место.

FAQ#

Ползунок качества недоступен — почему?#

PNG — формат без потерь; у него нет регулятора качества. Когда вы выбираете PNG, ползунок скрывается, потому что он бесполезен. Переключитесь на JPEG или WebP, чтобы управлять качеством.

Мой «сжатый» файл больше оригинала. Как так?#

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

Увеличивает ли инструмент размер, если задать огромную макс. ширину?#

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

Безопасно ли использовать WebP везде?#

Современные браузеры (Chrome, Edge, Firefox, Safari 14 и новее) поддерживают WebP. Если нужно поддерживать очень старые браузеры или некоторые конвейеры обработки изображений, оставайтесь на JPEG.