инструменты / сжать картинки
Сжать картинки с замером, а не на глаз
Киньте картинки в окно — получите их же, но заметно легче, и увидите, почему получилось именно столько: какое качество подобрано двоичным поиском, какой формат — JPEG или WebP — выиграл на этой самой картинке, почему выиграл именно он и сколько бы весил проигравший. Всё считается в этой вкладке: файл не отправляется никуда, и это можно проверить не на слово — отключите интернет после того, как страница открылась, и сжатие продолжит работать.
Перетащите картинки сюда или
Файлы не уходят с вашего компьютера — считаем прямо в этой вкладке.
Кто легче, JPEG или WebP — мы это замерили
Все четырнадцать сжималок в выдаче верят в один рецепт: переведи в WebP — станет легче. Мы это не приняли на слово, а прогнали сам инструмент — ровно то, что видит посетитель, — на живых фотографиях гранита и базальта со сколом: шумная, почти шершавая фактура камня, тот самый случай, где по теории WebP должен проигрывать JPEG из-за шума. На деле на всех проверенных фотографиях легче каждый раз выходил именно WebP — от −17 % на бережной строгости до −55 % на сильной. На части снимков жать было и вовсе нечего: камера уже отдала достаточно плотный JPEG, и инструмент честно сказал об этом, а не подсунул перекодировку ради самой перекодировки.
| Строгость | Экономия на шумной фактуре камня | Кто легче |
|---|---|---|
| бережно (SSIM 0,995) | от «жать нечего» до −17 % | WebP — там, где было что жать |
| обычно (SSIM 0,99) | от «жать нечего» до −33 % | WebP — там, где было что жать |
| сильно (SSIM 0,98) | −44…−55 % | WebP |
Значит ли это, что JPEG никогда не выигрывает у WebP? Нет — так бывает, и мы намеренно сравниваем оба формата на каждом файле, а не верим статистике заранее: даже на «трудной» фактуре камня угадать победителя нельзя. Уверенно WebP выигрывает там, где исходник PNG или нужна прозрачность, — туда мы его и ставим по умолчанию. На фотографиях сравниваем оба формата и показываем, какой из них выигрывает именно у вас и почему, а не по общему мнению.
Размер важнее формата
Второе, о чём молчат сжималки: главный резерв веса — не формат, а размер показа. Мы прогнали аудит пяти живых страниц и нашли источник экономии крупнее остальных: картинка крупнее места, где она реально показывается на странице, — это дало 4 088 КБ экономии на 69 картинках. «Просто сжать сильнее» на тех же файлах дало 84 КБ. Поэтому рядом со строгостью стоит ширина показа: укажете 1200 — картинку пересчитаем под неё до сжатия. Больше исходной ширины мы не сделаем никогда — выберете 1600 для картинки шириной 900, оставим 900 и скажем об этом в результате.
Что значит качество 0,99
Качество мы не подбираем на глаз — считаем меру SSIM (структурное сходство сжатой копии с оригиналом, от 0 до 1) и двоичным поиском находим наименьший вес, при котором мера не проваливается ниже планки. Планки три: «бережно» — SSIM 0,995, почти оригинал; «обычно» — SSIM 0,99, глаз не отличит от исходника (выбрано по умолчанию); «сильно» — SSIM 0,98, для веба, разница уже видна на плавных переходах вроде неба или градиента. Оговоримся сразу: SSIM — это приближение к глазу, а не сам глаз. Она хорошо сходится с восприятием на фотографиях и может ошибаться на графике с резкими краями и мелким текстом — такой результат стоит проверить и глазами.
Куда деваются EXIF и геометка
Картинка после сжатия перерисовывается заново через canvas, а он не переносит ничего, кроме самих точек: EXIF (дата съёмки, модель камеры, поворот кадра) и геометка, если она была в снимке с телефона, срезаются всегда, без отдельной настройки. Это не только вес — для кого-то это ещё и приватность: увозить на витрину сайта фотографию с адресом съёмки хочется не всегда. Разворот кадра при этом не теряется: страница читает EXIF-поворот до перерисовки, так что вертикальное фото с телефона не ляжет набок.
Если нужно узнать, сколько весят уже опубликованные на сайте картинки, — это к проверке скорости: она смотрит по адресу чужую страницу и ничего не чинит. Эта страница — наоборот: про сайт она не знает ничего, зато чинит сами файлы, которые вы ей дали.
Сделаем за вас
Если картинок на сайте много и часть из них весит так же, как в примерах выше, можем прогнать пересжатие по всему сайту при следующей работе. Обещать этим ничего в поиске не будем — это не про выдачу, а про вес страницы и то, как быстро она открывается. Напишите, посмотрим, что там весит на самом деле, и что стоит поправить в первую очередь.
Заявка принята, ответим на указанный контакт.
Вопросы
Файлы правда никуда не уходят
Да. Страница читает файл обычным полем выбора браузера, разбирает и пересобирает его прямо у вас во вкладке — ни один запрос с содержимым картинки наружу отсюда не уходит. Проверить это можно не на слово: откройте страницу, отключите интернет и сожмите файл — сработает как обычно. На сервер уходит только сама страница и её скрипты, когда вы её открываете, а дальше он в работе не участвует вовсе.
Как выбирается формат, JPEG или WebP
Мы не верим на слово, а кодируем вашу картинку обоими форматами и меряем каждую копию отдельно. Побеждает тот, что легче из тех, что удержали выбранную планку сходства. Если планку удержал только один формат — берём его, даже когда второй вышел легче, и говорим об этом прямо в строке результата: «выбран WebP — удержал планку „обычно“: JPEG вышел бы легче (195,3 КБ), но до планки не дотянул». Мера при этом у каждого формата своя: планка — это порог, ниже которого мы не опускаемся, а не одно общее число для обоих. У некоторых кодировщиков JPEG выигрывает у WebP на шумной, почти беспорядочной фактуре — зерно камня, ткань, шум с высокого ISO, — но угадать заранее нельзя: в нашей проверке на живых фотографиях гранита с той же шершавой фактурой легче каждый раз выходил как раз WebP. Готового ответа «на камне побеждает JPEG» у нас нет и не будет — победитель показывается рядом с проигравшим на каждом конкретном файле, а не по общему мнению.
Почему нет AVIF
Потому что честно закодировать его прямо в браузере нечем. Штатный способ получить картинку из canvas умеет отдавать только JPEG, PNG и WebP; кодировщика AVIF в браузерах на сегодня нет, а тащить его отдельной библиотекой весом в мегабайты — значит нарушить главное правило этой страницы: всё быстро и без загрузок на сторону. Появится в браузерах штатная поддержка — добавим формат и сюда.
Что будет с прозрачностью
PNG с прозрачным фоном мы не трогаем JPEG вовсе — этот формат прозрачность не умеет физически, и превращать значок с прозрачным фоном в картинку с белой заливкой мы не станем. Сравниваем только с WebP, который прозрачность держит; если браузер не умеет кодировать WebP, странице нечем сжать такой файл без потери прозрачности, и она скажет об этом прямо, а не подсунет испорченный результат.
Почему анимация не сжимается
Потому что canvas возьмёт от анимированного GIF или WebP только первый кадр и молча убьёт всё остальное движение — это порча файла, а не сжатие. Мы отличаем анимацию по числу кадров внутри файла и отказываемся её трогать вовсе, с прямым объяснением почему, вместо того чтобы отдать испорченный результат.