Сжать изображения _

Как работает сжатие изображений в браузере

Каждый проход сжатия работает полностью на JavaScript. Библиотеки кодеков не загружаются, и сервер не задействован. Собственный Canvas API браузера декодирует изображение, перекодирует его с более низким качеством и отдаёт вам Blob, который страница может показать в предпросмотре, скачать или упаковать в zip. Поскольку каждый шаг остаётся внутри песочницы вкладки, исходные файлы никогда не касаются сети.

1. Считывает каждый загруженный файл как Blob и создаёт объектный URL, чтобы браузер мог декодировать его локально, без копирования байтов на сервер или записи на диск.
2. Отрисовывает декодированное изображение на внеэкранном элементе Canvas в его исходных пиксельных размерах, готовое к перекодированию.
3. Вызывает canvas.toBlob(callback, mimeType, quality) для перекодирования пикселей. В режиме качества значение ползунка напрямую отображается на параметр квантования кодировщика; в режиме целевого размера страница делит пополам значение качества, пока выходной blob не уместится в ваш бюджет в байтах.
4. Показывает сводку до/после с исходным размером, сжатым размером и процентом экономии, затем предлагает скачивание для каждого изображения или единый ZIP для всей партии. ZIP создаётся в памяти с помощью fflate — библиотеки размером 8 КБ, загружаемой при первом использовании.

Зачем сжимать изображения?

• Меньшие изображения загружаются быстрее. Уменьшение главного изображения с 4 МБ до 600 КБ напрямую улучшает Largest Contentful Paint — один из показателей Core Web Vitals, которые Google использует для ранжирования. На странице с несколькими фотографиями экономия складывается в более быстрый первый рендеринг.
• Затем есть лимиты загрузки. Множество платформ CMS, систем тикетов и почтовых систем отклоняют всё, что больше 1 или 2 МБ, а быстрый проход сжатия укладывает фотографию в лимит, не открывая полноценный редактор.
• Пропускная способность и хранилище стоят денег в масштабе. Отправка WebP с качеством 0.8 вместо полноразмерного PNG может сократить вес изображений на треть и более, что снижает счета за исходящий трафик CDN и расход мобильного трафика для ваших посетителей.
• Некоторые изображения вообще не следует загружать. Поскольку всё здесь работает в вашем браузере, сканы документов, медицинские снимки и внутренние скриншоты остаются на вашем устройстве. В цепочке нет стороннего сервера вроде TinyPNG, о котором стоило бы беспокоиться.

Типичные сценарии использования

Сжатие нужно всякий раз, когда изображение больше, чем место, куда оно направляется. Три шаблона, которые мы видим снова и снова.

• Подготовка фотографий товаров для интернет-магазина. JPEG-оригиналы сжимаются до качества 0.8 (или цели 200 КБ), чтобы витрина оставалась быстрой и проходила Core Web Vitals на мобильных устройствах.
• Уменьшение скриншотов перед прикреплением к баг-трекеру или вики. Пакет PNG-снимков, конвертированных в JPEG с качеством 0.85, часто падает с десятков мегабайт до пары.
• Укладка фотографии в лимит загрузки — портал подачи заявлений на работу, отклоняющий файлы больше 1 МБ, почтовая система с жёстким лимитом вложений или аватар на форуме, который должен уместиться в бюджет по байтам.

Практический пример: JPEG 4 МБ до 400 КБ

JPEG размером 4 МБ прямо с камеры телефона — распространённая нагрузка, которая превышает лимиты загрузки и замедляет страницы. Это справедливый ориентир для того, что экономит сжатие.

Перетащите JPEG в зону загрузки, оставьте формат на JPEG и либо сдвиньте ползунок качества вниз до 0.7, либо переключитесь в режим целевого размера и введите 400 КБ. В режиме качества конвейер Canvas перекодирует один раз и показывает результат, обычно около 500–700 КБ в зависимости от фотографии. В режиме целевого размера страница пробует несколько значений качества, останавливается на наивысшем, которое всё ещё умещается под 400 КБ, и сообщает процент экономии. Нажмите Скачать на карточке, чтобы получить отдельный файл, или нажмите Скачать .zip, если вы сжали несколько изображений сразу. Весь цикл выполняется значительно меньше чем за секунду для изображения такого размера и потребляет нулевую пропускную способность после того, как сама страница загрузилась.

В чём разница между режимом качества и режимом целевого размера?

Режим качества даёт вам один ползунок от 0.1 до 1.0, который отображается на параметр квантования кодировщика JPEG или WebP — меньшие числа означают меньшие файлы и более заметные артефакты. Режим целевого размера переворачивает задачу: вы называете размер в килобайтах, и страница делит пополам значение качества, кодируя несколько раз, пока не найдёт наивысшее качество, которое всё ещё умещается в ваш бюджет. Режим целевого размера удобен, когда важен жёсткий лимит (скажем, лимит загрузки 1 МБ); режим качества быстрее и лучше, когда вам просто нужен предсказуемый визуальный результат. PNG без потерь, поэтому ни один режим к нему не применяется.

Всё происходит на моём устройстве?

Да, полностью. Страница использует нативный Canvas API браузера и Web File API для декодирования и перекодирования каждого изображения в памяти. Никакие данные изображений не отправляются на сервер, нет временной загрузки и нет облачного цикла. Вы можете проверить это сами: откройте DevTools, перейдите на панель Network и запустите сжатие. Единственные исходящие запросы, которые вы увидите, — это начальная загрузка страницы и рекламные вызовы. Ничего похожего на изображение не покидает вкладку.

Почему сжатие PNG иногда едва уменьшает его?

PNG — формат без потерь, поэтому Canvas API не может выбросить детали, чтобы сделать его меньше — он может лишь заново упаковать те же пиксели. Для фотографий PNG уже большой, и перекодирование без потерь экономит мало. Реальный выигрыш приходит от смены формата вывода на JPEG или WebP, которые используют сжатие с потерями, подходящее для фотографий, и обычно оказываются в 4–10 раз меньше. Сохраняйте PNG только тогда, когда вам нужно качество без потерь или прозрачность; в противном случае выбирайте JPEG для фотографий или WebP для лучшего баланса размера и качества.

Какой формат выбрать?

Для фотографий WebP с качеством 0.8 даёт лучший баланс размера и качества и поддерживается каждым браузером, выпущенным с 2021 года; JPEG — безопасный универсальный запасной вариант, когда получатель старее или строже. Выбирайте PNG только тогда, когда вам нужно качество без потерь или альфа-канал — штриховая графика, скриншоты интерфейса, логотипы с прозрачностью. Если вы оптимизируете под скорость страницы, а ваша аудитория использует современные браузеры, WebP почти всегда правильный выбор; если вы кормите старый CMS или печатный конвейер, который отклоняет WebP, придерживайтесь JPEG.

Перетащите изображения, выберите уровень качества или целевой размер, сожмите. Всё работает в вашей вкладке. Без загрузки, без аккаунта, без ожидания в очереди сервера.