Сжатие изображений в браузере онлайн — JPEG, WebP, PNG без загрузки

Тяжёлые картинки тормозят страницу, а тащить ещё не опубликованные материалы клиента в незнакомый онлайн-сервис не хочется. Здесь этой дилеммы нет: сжатие идёт прямо в браузере через canvas, файлы на сервер не уходят.

Разница с облачными сжималками принципиальная. Там вы отдаёте файл чужому серверу и верите обещаниям в политике. Здесь картинка не покидает ваш компьютер: страница загрузилась, и дальше всё считает ваш процессор. Можно выдернуть интернет и продолжать работать.

Загрузите хоть одну картинку, хоть десяток, выставьте качество и скачайте результат. По каждому файлу инструмент покажет превью, исходный и новый размер, процент экономии, а внизу подобьёт общий итог.

Кому пригодится

• Контентщикам и редакторам, которые готовят иллюстрации к публикации и не хотят раздувать страницу.
• SEO-специалистам: вес картинок напрямую влияет на скорость загрузки.
• SMM-специалистам, которые подгоняют визуал под ограничения площадок.
• Всем, кто работает с чужими материалами. Фотографии клиента, сканы, макеты до релиза: раз обработка идёт локально, показывать их стороннему сервису не нужно.

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

1. Выберите файлы. Можно сразу несколько, они обработаются одной операцией.
2. Поставьте качество. Чем ниже, тем легче файл и тем заметнее артефакты.
3. При желании задайте максимальную ширину или высоту. Картинка уменьшится пропорционально, и это дополнительно срежет вес.
4. Выберите формат на выходе: JPEG, WebP, PNG или сохранить исходный.
5. Скачайте файлы по одному или посмотрите суммарную экономию внизу.

Две вещи стоит знать заранее. Скачивание идёт по одной картинке: кнопки «забрать всё архивом» нет, и браузер спросит разрешение, когда файлов много. Убрать лишний файл из списка тоже нельзя, список только растёт. Начать с чистого листа поможет перезагрузка страницы.

Любую настройку можно менять после загрузки. Сдвинули ползунок, поменяли формат или ширину, и все картинки пересчитаются заново из исходников. Качество не теряется от повторных пересчётов: инструмент каждый раз берёт оригинал.

Какое качество ставить

Ползунок ходит от 0,1 до 1 с шагом 0,05, по умолчанию стоит 0,8. Это рабочее значение для большинства задач. Дальше ориентиры из практики:

• 0,8 для фотографий в статью и в карточку товара. Разницу с оригиналом на экране заметит редкий глаз.
• 0,85 и выше для крупных героев на первом экране и для снимков с мелкой фактурой: ткань, волосы, листва.
• 0,6 до 0,7 для миниатюр и превью в списках. Их смотрят мельком.
• Ниже 0,5 лезут квадраты вокруг контрастных границ. Иногда это допустимо, но проверяйте глазами.

Ползунок действует на JPEG и WebP. PNG пересобирается без потерь, и значение ползунка на него не влияет.

Простая проверка на своём файле. Возьмите снимок с телефона: примерно 4032 на 3024 точки и около четырёх мегабайт. Поставьте ширину 1600 и качество 0,8. На выходе получится JPEG весом примерно в десять раз меньше. Откройте оба файла рядом и сравните: на экране разницы не видно, а страница грузится совсем иначе.

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

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

Если не уверены, начните с варианта «сохранить исходный» и подберите качество. Формат поменять всегда успеете.

Про прозрачность помните одно. JPEG её не умеет, поэтому прозрачный фон при переводе в JPEG зальётся белым. Логотип на прозрачном фоне лучше оставлять в PNG или переводить в WebP.

И про PNG честно: браузерный кодировщик не подбирает палитру, он просто пересобирает файл. Хорошо сжатый PNG после такой обработки иногда становится тяжелее исходника. Инструмент это покажет, процент экономии уйдёт в минус и подсветится красным.

Сколько файлов и какие картинки инструмент возьмёт

Жёсткого лимита на число файлов и на вес одной картинки в инструменте нет. Ограничение другое, и оно физическое: всё держится в памяти вкладки. На каждый снимок уходит исходник, распакованный кадр и результат. Распакованный кадр 4000 на 3000 точек занимает около 48 мегабайт независимо от того, что сам файл весит четыре.

Отсюда практика: пачка из десяти-двадцати обычных фотографий проходит легко, сотня тяжёлых снимков подвесит вкладку на слабой машине. Прогресс-бара нет, поэтому лучше грузить порциями. Полоса прогресса тут и не поможет: пока браузер жмёт, вкладка всё равно занята.

Теперь про форматы на входе:

• JPEG, PNG и WebP проходят как есть, это основной сценарий.
• AVIF откроется, если его понимает ваш браузер. На выходе он всё равно станет JPEG, WebP или PNG: своего кодировщика AVIF у браузера нет.
• GIF возьмётся, но анимация пропадёт. Останется первый кадр, и сохранить его можно только картинкой без движения.
• SVG превратится в растр того размера, который задан внутри файла. Векторную графику через сжималку гонять не нужно.
• HEIC и HEIF с айфона большинство браузеров не открывает. На Windows и Android такой файл просто не появится в списке, причём молча, без сообщения об ошибке. В Safari на технике Apple он откроется. Обходной путь простой: включите в настройках камеры съёмку в JPEG или переведите снимки заранее.

Файл, который браузер не смог показать картинкой, всегда пропадает без объяснений. Если загруженного снимка нет в списке, дело почти наверняка в формате.

Что происходит с EXIF и геометками

Метаданные не переживают пересжатие. Картинка рисуется заново на холсте, а в новый файл попадают только пиксели. Из снимка уходят дата съёмки, модель камеры и объектива, настройки, геометка, авторские поля и цветовой профиль.

Чаще это плюс. Фотографию клиента можно выкладывать, не думая о том, что в ней остались координаты склада или домашний адрес. Отдельная чистка EXIF перед публикацией не нужна.

Но иногда это минус, и лучше знать заранее:

• Фотобанкам и агрегаторам недвижимости часто нужны дата и координаты. После сжатия их не будет.
• Снимок как доказательство в споре или в акте теряет метаданные, а вместе с ними часть доказательной силы. Держите оригинал отдельно.
• Цветовой профиль тоже срезается. Снимки в широком цветовом охвате могут поехать по цвету, так что проверяйте их особенно внимательно.
• Поворот кадра сохраняется: браузер применяет его к пикселям ещё до сжатия. Перевёрнутых фотографий бояться не нужно.

На что смотреть в результате

Процент экономии врёт реже, чем глаз: откройте превью и сравните. Если на фотографии полезли квадраты вокруг контрастных границ, поднимите качество на пару шагов. Если картинка всё ещё тяжёлая при нормальном виде, срежьте пиксельные размеры: часто в макет уходит изображение вдвое шире, чем реально нужно.

Рядом с процентом инструмент показывает новые размеры в точках. Сверяйтесь с ними, когда ставите ограничение по ширине: если цифры не изменились, картинка была меньше лимита и уменьшать было нечего. Файл сохраняется под прежним именем с добавкой «-min», так что оригинал не затрётся.

Одна оговорка про приватность: адреса файлов и сами файлы никуда не отправляются, но это значит и то, что обработка зависит от вашего устройства. Большую пачку тяжёлых снимков старый ноутбук будет жевать заметно дольше.