Блог Calcup · Информатика
Сжатие изображений без сервера: WebP, PNG и JPEG в Calcup
Разбор нового инструмента Calcup: как сжать WebP, PNG и JPEG локально в браузере, что реально делает Canvas и где у такого подхода есть ограничения
В этой заметке
Коротко
- Зачем вообще ещё один компрессор картинок
- Файлы не уходят наружу
- Что значит “умное” сжатие
- WebP, JPEG или PNG
В статье
Зачем вообще ещё один компрессор картинок
Картинки до сих пор ломают страницы банально: фото из телефона весит несколько мегабайт, PNG из дизайна тащит лишний вес, превью для статьи забыли пережатить перед публикацией. Потом сайт грузится медленно, а проблема выглядит как “ну там всего одна картинка”.
В Calcup появился инструмент сжатия изображений. Он принимает WebP, PNG и JPEG, перекодирует файл прямо в браузере и показывает, сколько веса получилось убрать. Логика простая: выбрать файлы, формат результата, качество, посмотреть итог и скачать готовые изображения.
Файлы не уходят наружу
Главный смысл инструмента - локальная обработка. Файл открывается через browser File API, декодируется в изображение, рисуется на Canvas и сохраняется обратно как Blob. Никакого серверного аплоада для самого изображения тут нет.
Это удобно для рабочих черновиков, клиентских материалов, картинок до публикации и просто файлов, которые не хочется гонять через сторонний сервис. Share-ссылка тоже не хранит изображения: в ней остаются только настройки формата, качества, фона для JPEG и режима “не увеличивать файл”.
Что значит “умное” сжатие
Тут нет магии и нет попытки притвориться серверным TinyPNG. Инструмент использует то, что уже умеет браузер: Canvas encoder для WebP, JPEG и PNG. Для WebP и JPEG качество реально влияет на размер и потери. Для PNG браузер обычно работает как lossless encoder, поэтому ползунок качества может почти ничего не менять.
Защита “не увеличивать файл” нужна как раз для таких случаев. Если после перекодирования результат оказался тяжелее исходника, Calcup оставляет оригинал и честно показывает статус. Это лучше, чем скачать файл с красивым словом compressed, который по факту стал больше.
WebP, JPEG или PNG
Для сайта чаще всего стоит начинать с WebP около 80-85%. Это нормальный баланс для фото, превью, иллюстраций и карточек. JPEG полезен для фотографий без прозрачности, особенно если нужна максимальная совместимость или понятный старый формат.
PNG лучше оставлять там, где важны прозрачность, резкие края, интерфейсные скриншоты или lossless-результат. Но если задача именно уменьшить вес, PNG не всегда лучший выбор. Иногда честнее сразу попробовать WebP и сравнить цифры, а не надеяться что PNG внезапно похудеет в два раза.
Что смотреть в результате
После обработки у каждого файла есть исходный размер, новый размер, процент изменения, формат и статус. Если файл готов - его можно скачать отдельно. Если файлов несколько - можно запустить скачивание всех готовых результатов отдельными загрузками браузера.
Рядом полезно держать калькулятор соотношения сторон, конвертер размера данных и калькулятор времени загрузки. Один показывает пропорции картинки, второй быстро переводит KB/MB, третий помогает понять, сколько такая картинка будет ехать по сети.
Где границы
При перекодировании через Canvas обычно теряются EXIF, ICC и часть метаданных. Для веса это плюс, для архивных фото или цветокритичных материалов - уже повод проверить результат руками. Очень большие изображения могут упереться в лимиты памяти canvas на телефоне или старом браузере.
После первого релиза в инструмент добавлен базовый ресайз, а для отдельного сценария появилась страница изменения размера изображений. При этом ZIP-архива, AVIF, HEIC, SVG и RAW всё ещё нет: это клиентская обработка без серверной части, поэтому результат важно проверять на реальном файле.