Что такое сжатие изображений
Сжатие изображений — это процесс уменьшения файла без (видимого) изменения того, как картинка выглядит. Файл, с которого ты начал — фото на 4 МБ с телефона, PNG-экспорт из Figma на 2 МБ, скриншот WebP на 6 МБ — почти всегда содержит больше бит, чем картинке реально нужно. Компрессор пересохраняет те же пиксели с другим качеством, выкидывает лишние данные и пишет файл поменьше, который на экране выглядит так же.
«Сжатие изображений» работает с PNG, JPG и WebP. Полностью в браузере, через canvas API: декодирует изображение в пиксели, пересохраняет с выбранным качеством, отдаёт результат. JPG и WebP на 75% обычно теряют 50-60% размера без видимой разницы. PNG без потерь, поэтому экономия скромнее — обычно 10-30% от более чистого пересохранения, а не от качества. Без загрузки, без водяных знаков, без потолка 5 МБ.
Сравнение с TinyPNG, iLoveIMG и Convertio
Чаще всего всплывают три конкурента, и каждый делает другой размен.
TinyPNG — знаменитость. У них действительно отличный компрессор PNG и JPG на pngquant и mozjpeg — лучше, чем умеет canvas API, особенно для PNG. Размен: твоё изображение уходит к ним на сервер, сжимается, возвращается. Бесплатный тариф — 5 МБ на файл и 20 файлов в пакете. Дальше регистрация. Если у тебя PNG-логотип или иконка, и важен каждый килобайт, TinyPNG выдаёт меньший файл — примерно на 10-20% на PNG.
iLoveIMG тоже сжимает на сервере, с тем же путём «загрузил-скачал». Поддерживает пакеты, но бесплатный тариф ограничен 25 МБ на файл и числом сжатий в день. Качество нормальное — они используют libjpeg-turbo и подобные инструменты — но это снова поход на чужой сервер.
Convertio — комбайн: 200+ форматов, серверная сторона, тот же танец «загрузил-подождал-скачал». Широкое покрытие форматов, самая слабая фокусировка на качестве изображений из трёх. Бесплатный тариф — 100 МБ суммарно в день и 2 одновременных конвертации.
Наш размен: та же работа в твоём браузере через нативный canvas. Медленнее на 1-2 секунды на файл (round-trip через canvas не бесплатный). Байты не покидают вкладку. Лимита пакета нет, дневной квоты нет, регистрации нет. Вывод чуть больше, чем у TinyPNG, конкретно на PNG — для всего остального разница пренебрежимо мала.
Как пользоваться
Перетащи изображения. Инструмент принимает PNG, JPG и WebP, до 50 МБ на файл и 200 МБ суммарно за пакет. Смешанные форматы ок — каждое пересохраняется в своём.
- Перетащи или выбери изображения. Папки работают; папка из 50 фото за раз.
- Выбери качество. 75% (по умолчанию) — золотая середина для JPG и WebP: визуально как исходник, ~50-60% меньше. Ниже — меньше файлы и видимые артефакты на тексте и резких краях. PNG ползунок почти не использует, потому что он без потерь.
- Нажми «Сжать». Каждое изображение пересохраняется за 1-3 секунды. В строке — точная разница в размере.
- Скачай каждое стрелкой или нажми «Скачать все». Имена выхода — это вход плюс суффикс
-compressed(vacation.jpgстановитсяvacation-compressed.jpg).
Все операции локальные. Декодирование — нативный загрузчик изображений браузера, пересохранение — canvas.toBlob(), загрузка — Blob URL. Открой Network на шаге сжатия — ноль исходящих запросов.
Какое качество выбрать
Ползунок качества — единственное реальное решение. Есть четыре частые настройки, и каждая под свою задачу.
| Качество | Размер JPG/WebP | Видимая потеря | Кейс |
|---|---|---|---|
| 95% (архив) | ~80% от оригинала | Нет ни при каком увеличении | Мастер-копия, профессиональная фотография |
| 85% (высокое качество) | ~55% от оригинала | Невидимо невооружённым глазом | Полноразмерные фото, портфолио, печатное качество для веба |
| 75% (по умолчанию) | ~40% от оригинала | Невидимо на обычной дистанции просмотра | Соцсети, блоги, большая часть веба |
| 50% (агрессивно) | ~25% от оригинала | Заметные артефакты на тексте и краях | Email-вложения, где важна скорость, превью |
75% по умолчанию выбрано не случайно: это самое сильное сжатие, при котором большинство людей не отличает результат на обычной дистанции. Ниже начинаются видимые JPG-артефакты — квадратики 8×8 у резких краёв, мутные градиенты на небе, ореолы вокруг текста. Если в изображении много текста или тонкой графики, оставайся на 85% и выше.
Пример с реальными цифрами
Реальный тест: папка из 12 отпускных фото с iPhone 14, экспорт в JPG в полном качестве. Стартовый пакет — 51 МБ. Слишком много для почты, медленно для загрузки в Google Photos.
| Качество | Общий размер | Уменьшение | Заметки |
|---|---|---|---|
| Исходник (без сжатия) | 51,0 МБ | — | Дефолт iPhone; качества больше, чем экран покажет |
| 85% JPG | 28,3 МБ | 45% | Неотличимо от оригинала на любом экране телефона или ноутбука |
| 75% JPG (по умолчанию) | 21,6 МБ | 58% | Всё ещё неотличимо; то, что выбирает большинство |
| 60% JPG | 14,2 МБ | 72% | Лёгкая мягкость при пристальном осмотре деталей |
| 50% JPG | 10,8 МБ | 79% | Видимые артефакты в тенях и на тонкой детали |
На 75% пакет упал с 51 МБ до 21,6 МБ — спокойно проходит вложением Gmail (лимит 25 МБ), загружается в iCloud в четыре раза быстрее, выглядит так же на любом экране, на котором его будут смотреть. Это правильный ответ почти для любого «нужно отправить фото».
Сравни с тем же пакетом через TinyPNG: примерно 19 МБ на выходе (на 12% меньше нашего) с их собственным mozjpeg-кодировщиком, после загрузки 51 МБ на их серверы и ожидания. За 3 МБ дополнительной экономии на приватных фото размен неочевидный.
Почему PNG экономит меньше, чем JPG
PNG — формат без потерь. Декодируемое изображение байт-в-байт совпадает с закодированным — информация о качестве не выбрасывается. Размер PNG зависит от того, насколько эффективно энкодер пакует данные, а не от настройки качества.
Нативный PNG-энкодер браузера нормален, но не блестящий. Специализированные оптимизаторы PNG — pngquant (движок внутри TinyPNG), optipng, ImageOptim — используют техники, которых нет у canvas: сокращение палитры, более умные деревья Хаффмана, перцептуально-незаметное квантование цвета для 24-битных PNG. Они дают 50-70% уменьшения на типичном PNG. Мы — 10-30%.
Два практических вывода:
- Если у тебя фотография в PNG, сначала переведи её в JPG или WebP — выигрыш в 5-10 раз больше, чем у любого оптимизатора PNG. Наш Конвертер форматов изображений делает это в один клик.
- Если это логотип, иконка, скриншот или что-то с резкими краями и небольшим количеством цветов, PNG — правильный формат. Мы дадим скромное уменьшение. Для агрессивного PNG-сжатия TinyPNG или ImageOptim сделают лучше. Используй оба: нас — для приватно-чистого пакета, их — когда нужно выжать последние килобайты из ассета, идущего в продакшен.
Что происходит с прозрачностью, EXIF и цветовыми профилями
Несколько деталей, важных для конкретных задач.
Прозрачность. PNG и WebP сохраняют альфу через сжатие. Прозрачные пиксели остаются прозрачными. JPG альфу не несёт — там, где исходник прозрачен, перед кодированием закрашивается белым. Нужна прозрачность — сжимай в PNG или WebP, не JPG.
EXIF. Canvas API при пересохранении вырезает большую часть EXIF. Модель камеры, GPS, экспозиция, объектив — всё уходит. Для большинства это плюс: GPS уходит до того, как фото попало в публичный доступ. Для архивирующих фотоархив, где EXIF важен, нужен инструмент с явным EXIF passthrough (jpegtran или ExifTool на десктопе). Можем добавить позже, но это маленькая аудитория.
Цветовые профили. Встроенные ICC-профили вырезаются при canvas-пересохранении. Изображение корректно отображается в любом браузере (который по умолчанию считает sRGB), но если ты работаешь с prophoto или display-P3 для печати, информация о широком цветовом охвате не выживет. Фотографам и печатным процессам — цвето-осознающий компрессор.
Анимации. Canvas в браузере отдаёт только первый кадр анимированного GIF или WebP. Сжать первый кадр и потерять анимацию — редко то, чего хотят, поэтому анимированные форматы исключены. Для анимаций — ezgif или специализированный инструмент.
Похожие инструменты
«Сжатие изображений» — одна часть более широкого набора:
- Изменение размера изображения — менять размер в пикселях (1920×1080 → 960×540). Часто это больший выигрыш для «уменьшить файл» — сначала размер, потом сжатие.
- Конвертер форматов изображений — переводи между PNG, JPG и WebP. Если фотография в PNG, перевод в WebP обычно уменьшает её сильнее, чем сжатие PNG.
- PNG в WebP — специально для случая PNG → WebP. WebP на 80% обычно на 60-70% меньше исходного PNG без видимой потери.
- WebP в JPG — для отправки WebP тому, чей инструмент его не принимает.
- Сжать PDF — если реальная цель — уменьшить документ, версия для PDF.
Частые вопросы
Чем это отличается от TinyPNG?
Результат тот же, модель доверия противоположная. TinyPNG загружает изображение к ним на сервер и обрабатывает там — быстро, но байты покидают устройство. Бесплатный тариф — 5 МБ на файл и 20 файлов в пакете. Мы делаем ту же работу в браузере через нативный canvas — медленнее на 1-2 секунды на файл, но байты не покидают вкладку. Лимита пакета нет, потолка файла нет, кроме 50 МБ на файл. Оба хороши; выбирай по предпочтению размена.
Почему сжатие PNG скромнее JPG?
Потому что PNG без потерь — сжатие чисто структурное (deflate, оптимизация палитры). У нативного PNG-кодировщика браузера нет продвинутых оптимизаций специализированных компрессоров (pngquant, optipng, ImageOptim). Для агрессивного сжатия PNG наш инструмент даёт 10-30%; специализированный — 50-70%. Быстрая проверка: если изображение — фотография, переведи в JPG или WebP — выигрыш в 5-10 раз больше.
Точно ли моё изображение не загружается?
Да. Все операции в браузере. Декодирование — нативный HTMLImageElement; пересохранение — canvas.toBlob(). Открой вкладку Network на момент сжатия: ноль исходящих запросов после загрузки страницы. HTML, CSS и JS приходят с нашего CDN; байты изображения не покидают вкладку.
Какое качество выбрать?
Для отправки фото: 75% — глазу незаметно, размер падает на ~50-60%. Для email, где важна скорость: 50-60% (заметные артефакты на тексте, но для фото приемлемо). Для архива: 90-95% (почти без потерь, экономия меньше). Для PNG: ползунок почти не влияет; ставь 100% и прими скромное 10-30%.
Можно сжать много изображений разом?
Да. Кидай или выбирай несколько файлов (папка из 50+ фото — нормально). Они сжимаются по очереди, скачиваешь по отдельности. Лимит 200 МБ суммарно защищает память — для большего бери порциями.
Сохраняет ли вывод EXIF?
В основном нет. Canvas в браузере при пересохранении вырезает большую часть EXIF (модель камеры, GPS, данные экспозиции). Если конкретно нужно сохранить EXIF, используй инструмент со специализированным JPG-энкодером с EXIF passthrough. Для большинства (соцсети, почта, веб-загрузки) потеря EXIF — на самом деле плюс: вырезает GPS, которым ты не собирался делиться.
А прозрачность?
Выводы PNG и WebP сохраняют прозрачность через сжатие. JPG не несёт альфу — там, где исходник прозрачен, перед кодированием закрашивается белым. Чтобы сохранить прозрачность, сжимай в PNG или WebP, не JPG.
Почему нет анимированных форматов (GIF, анимированный WebP)?
Декодеры canvas отдают только первый кадр анимации. Сжать первый кадр и потерять анимацию редко то, чего хочет пользователь, поэтому анимированные форматы исключены. Для них используй ezgif или специализированный инструмент.