Пересжатие с потерями необратимо: качество, снятое один раз, обратно не возвращается. Поэтому пересжимайте оригинал, а не уже сжатую копию, и держите оригиналы отдельно.
/tool/image-compressor/ работает файл не покидает браузер
Выберите картинки или вставьте скриншот из буфера — браузер пересожмёт их сам и покажет, сколько удалось снять. Файлы никуда не загружаются: они декодируются и кодируются на вашем устройстве, в отдельном потоке. Можно задать вес, в который надо уложиться, а потом открыть любую картинку во всю ширину и подвигать шторку между оригиналом и копией.
Можно выбрать сразу несколько файлов, перетащить их в рамку или вставить скриншот из буфера. Оригиналы не меняются — инструмент делает копии.
Нажмите на превью или «Просмотр» — картинка откроется во всю ширину экрана: шторка между оригиналом и копией, зум 1:1 с перетаскиванием, режим «Разница» и ползунок качества, который пересжимает только эту картинку.
Здесь появится строка на каждый файл: сколько весил, сколько стал весить, во сколько цветов или на каком качестве уложился и откуда забрать копию.
Выберите файлы кнопкой, перетащите их в пунктирную рамку или вставьте скриншот из буфера через Ctrl+V. Можно сразу несколько.
Оставьте формат «Автоматически», если не знаете, что выбрать: инструмент смотрит на саму картинку — прозрачность уводит в WebP, схему или скриншот в PNG с палитрой, фотографию в AVIF или WebP. «Как в оригинале» пересжимает, не меняя формат.
Нужно уложиться в вес — включите «Уложиться в вес» и поставьте число или нажмите пресет. Качество подберётся само, а в таблице будет написано, на каком значении файл поместился.
Поставьте размер по тому месту, где картинка реально показывается. Фотография шириной 4 000 px на карточке товара в 600 px — это впустую потраченные мегабайты. Способов пять: по ширине, по высоте, по длинной стороне, в процентах и «вписать в W×H».
Откройте картинку кнопкой «Просмотр» и подвигайте шторку. Ползунок качества там пересжимает только эту картинку, сразу; кнопка «Ко всем» переносит найденные настройки на всю пачку.
Забирайте результат: «Скачать» в строке таблицы — один файл, «Скачать все» — сразу все одним ZIP. Если пересжат один файл, кнопка отдаст его без архива.
Экономия = (было − стало) ÷ было × 100 %
Пересжатие с потерями необратимо: качество, снятое один раз, обратно не возвращается. Поэтому пересжимайте оригинал, а не уже сжатую копию, и держите оригиналы отдельно.
Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.
Сколько снято: 2 400 − 600 = 1 800 КБ.
Какая это доля от исходного веса: 1 800 ÷ 2 400 = 0,75.
В процентах: 0,75 × 100 = 75.
Экономия 75 %. Файл стал легче ровно в четыре раза: 2 400 ÷ 600 = 4.
Правда. Картинка декодируется в самом браузере через createImageBitmap, рисуется в canvas и оттуда же кодируется обратно — в отдельном потоке (Web Worker), созданном из этой же страницы. Ни одного сетевого запроса при этом не происходит: откройте вкладку «Сеть» в панели разработчика и убедитесь сами. Этим инструмент отличается от TinyPNG и iLoveIMG, куда файлы уходят на чужой сервер.
Потому что PNG больше не отдаётся браузеру. canvas кодирует PNG в 24 бита на точку со своими настройками, и копия скриншота выходила тяжелее исходника. Теперь картинка проходит через квантование палитры (медианное сечение, число цветов задаётся ползунком) и собирается собственным кодировщиком PNG: индексированные цвета, глубина 1, 2, 4 или 8 бит, свой deflate. На скриншотах и схемах это обычно втрое-впятеро легче исходного файла. Если палитру выключить, PNG снова соберёт браузер.
На выход — да, если его умеет ваш браузер: страница спрашивает об этом сам браузер при загрузке и гасит кнопку, когда ответ отрицательный. Сегодня AVIF кодируют Chrome и Edge, Firefox и Safari — нет. Своего кодировщика AVIF на WebAssembly здесь нет: он весит мегабайты, и его пришлось бы тянуть отдельным файлом. На вход AVIF открывается везде, где браузер умеет его показывать.
Открывается только в Safari: HEIC умеет декодировать сама система, и браузер этим пользуется. В Chrome и Firefox такой файл не откроется — в таблице будет честно написано, что не вышло. Обходной путь на айфоне: «Настройки → Камера → Форматы → Наиболее совместимый», тогда снимки сохраняются в JPEG.
В WebP, PNG и AVIF она сохраняется, в PNG с палитрой — тоже: полупрозрачные точки занимают отдельные записи палитры, и края остаются мягкими. JPEG прозрачность не умеет, поэтому прозрачные места заливаются белым — это видно в просмотрщике сразу.
Это когда площадка требует «не больше 100 КБ». Инструмент подбирает качество двоичным поиском: пробует середину диапазона, смотрит на вес, сдвигает границу — шесть-восемь проходов, и в таблице появляется найденное значение, например «63». Для PNG так же подбирается число цветов. Если файл не помещается даже на минимальном качестве, картинка дополнительно уменьшается; когда и это не помогло, инструмент прямо пишет, что не уложился.
Нет, и это проверено отдельно. Сложность в том, что браузеры разошлись: одни разворачивают картинку по EXIF сами, другие отдают как лежит, а Chrome сегодня не слушает даже прямую просьбу «не разворачивай». Поэтому инструмент не спрашивает браузер, а ставит опыт: собирает крошечный JPEG 8×4 с меткой поворота и смотрит, каким тот вернулся. Развернул сам — мы не трогаем; отдал как есть — разворачиваем мы. С галкой «Сохранить EXIF» метка поворота в копии сбрасывается в единицу: пиксели уже повёрнуты, второй поворот положил бы фотографию набок.
По умолчанию они не переносятся: canvas отдаёт только пиксели, и для веба это скорее плюс — вес меньше и геометка съёмки не уезжает вместе с картинкой. Галка «Сохранить EXIF» перекладывает сегмент EXIF из исходного JPEG в копию, если и на входе, и на выходе JPEG; метка поворота при этом сбрасывается в единицу. Цветовой профиль не переносится, и это не недоделка: браузер, раскодировав картинку, уже перевёл её в sRGB — пиксели стали другими. Приклеить к ним профиль Adobe RGB значит соврать про цвета: копия вышла бы кислотной. Профиль в копию либо пишет сам браузер, либо его нет, и тогда подразумевается sRGB — то, что и есть на самом деле. Для WebP, AVIF и PNG переноски EXIF нет вовсе.
Останется первый кадр — собрать анимацию заново браузерный canvas не может. Инструмент определяет анимацию по числу кадров в самом файле и пишет об этом в строке результата, а не молчит. Для анимированных WebP и APNG — то же самое.
Чтобы увидеть, где именно сжатие съело картинку. Разница считается по точкам между оригиналом и копией и усиливается в шесть раз: чем светлее место, тем сильнее там разошлось. На фотографии светятся контуры, на скриншоте — буквы; если буквы засветились, качество взято слишком низкое.
Потому что браузеры глушат подряд идущие скачивания: Chrome спрашивает разрешение на «скачивание нескольких файлов», Safari может оборвать очередь на втором-третьем. Архив собирается тут же, во вкладке, методом store — без сжатия внутри: файлы уже сжаты, второй проход не снял бы почти ничего, зато отнял бы время. Имена внутри архива записаны в UTF-8, кириллица читается.
Да, в самом браузере: формат, качество, размер, палитра и режим имени возвращаются при следующем заходе. Кроме того, они складываются в адрес страницы — ссылку с нужными настройками можно переслать коллеге, и у него откроется то же самое. Сами картинки, разумеется, в адрес не попадают.