Сжатие изображений
Перетащите изображения, выберите формат и качество и смотрите, как с каждого файла уходят байты. Всю работу делает ваш браузер, поэтому картинки остаются на вашем устройстве.
- Изображения только уменьшаются до максимального размера, никогда не увеличиваются, а пропорции сохраняются.
- Новый файл создаётся только из пикселей: данные EXIF, GPS-координаты, модель камеры и цветовой профиль не переносятся. Сначала применяется поворот, записанный камерой, поэтому снимок остаётся в правильном положении.
- В JPEG нет прозрачности: прозрачное изображение, сохранённое в JPEG, получает белый фон.
Ваши изображения открывает и перекодирует ваш собственный браузер. Они никуда не загружаются, и после закрытия страницы ничего не остаётся.
Откуда берётся вес изображения
Файл изображения представляет собой сетку пикселей, записанную компактным способом. Его размер сводится к двум числам: сколько всего пикселей и сколько байтов формат тратит на каждый.
О первом числе обычно забывают. Фото с телефона имеет примерно 4000 на 3000 пикселей, всего 12 миллионов. Колонка веб-страницы редко бывает шире 800 CSS-пикселей, или 1600 настоящих пикселей на чётком экране. Отправьте туда полное фото, и браузер скачает 12 миллионов пикселей, чтобы выбросить 10 миллионов из них. Уменьшение ширины картинки вдвое делит число пикселей на четыре, а размер файла почти во столько же. Поэтому в этом инструменте есть максимальная ширина и максимальная высота. Задайте одну из них, и каждая картинка уменьшится, чтобы поместиться, с сохранением пропорций. Картинка, которая уже меньше, остаётся своего размера.
Второе число зависит от формата и настройки качества. Форматы с потерями хранят не каждый пиксель. Они хранят описание, которое для глаза выглядит так же, а число качества говорит, какую разницу вы готовы принять.
Какой формат выбрать
| Формат | Подходит для | Имейте в виду |
|---|---|---|
| JPEG | Фото, которые должны открываться везде: вложения в письма, старые программы, типографии. | Нет прозрачности. Формат появился в 1992 году, поэтому он наименее эффективен из форматов с потерями. |
| WebP | Фото и иллюстрации на сайте. Обычно на 25-35% меньше JPEG при том же виде. | Его показывают все современные браузеры. Некоторые настольные программы и формы загрузки до сих пор его не принимают. |
| AVIF | Самые маленькие файлы, часто вдвое меньше JPEG. Плавные градиенты и небо остаются чистыми при малых размерах. | Медленно кодируется. Показывается в Chrome 85, Firefox 93, Safari 16.4 и новее. Старым браузерам нужна замена. |
| PNG | Скриншоты, логотипы, штриховые рисунки, всё с плоскими цветами и чёткими краями. | Без потерь. Фотография, сохранённая в PNG, в разы больше JPEG, из которого её получили. |
На веб-странице можно отдавать современный формат и держать замену для старых браузеров:
<picture>
<source srcset="team.avif" type="image/avif">
<source srcset="team.webp" type="image/webp">
<img src="team.jpg" alt="The team in the workshop" width="1600" height="1067">
</picture>Что эта страница делает с вашим файлом
Каждый файл проходит одни и те же шаги. Файлы обрабатываются по одному, поэтому расход памяти не растёт:
- Мы читаем первые байты, чтобы узнать формат и размер в пикселях. Файл больше 40 MB или примерно 50 мегапикселей отклоняется, прежде чем он успеет подвесить вкладку.
- Браузер декодирует картинку и применяет поворот, записанный камерой, чтобы вертикальные снимки не ложились набок.
- Картинка рисуется на холсте (canvas) в целевом размере.
- Холст кодируется. JPEG, WebP и PNG используют кодировщик, встроенный в ваш браузер. AVIF использует libavif, скомпилированную в WebAssembly, файл на 3.5 MB, который загружается с этого сайта при первом выборе AVIF. Он работает в фоновом потоке, поэтому страница продолжает отвечать.
Новый файл строится из пикселей и ни из чего больше, поэтому ничего лишнего с ним не приходит: ни блока EXIF, ни GPS-координат, ни серийного номера камеры, ни встроенной миниатюры. Цвета переводятся в sRGB, стандартное цветовое пространство веба.
Каждое повторное кодирование файла с потерями теряет ещё немного. Сжимайте из оригинала, один раз, и храните оригинал где-нибудь.
Как читать результат
Каждая карточка показывает старый и новый размер, долю экономии и размеры до и после. Сравнение нужно, чтобы судить о качестве. Проведите разделителем по лицу, небу или строке текста: именно там сжатие становится заметно первым. Если при масштабе 100% вы ничего не видите, снизьте качество на десять и посмотрите снова.
Иногда новый файл получается больше. Обычно это фото, переведённое в PNG, оригинал, который уже был сильно сжат, или качество около 100. Карточка об этом сообщает и позволяет сохранить вместо него оригинал.
Два результата зависят от вашего браузера. Safari не умеет записывать WebP из холста и возвращает PNG, инструмент это замечает и сообщает вам. Фото HEIC с iPhone может открыть только Safari 17 и новее. В других браузерах сначала экспортируйте их в JPEG.
Частые вопросы
Загружаются ли мои изображения на сервер?
Нет. Декодирование, изменение размера и кодирование происходят в вашем браузере. Единственная загрузка представляет собой сам кодировщик AVIF, когда вы выбираете AVIF. Можно загрузить страницу, отключиться от сети и всё равно сжимать в JPEG, WebP или PNG.
Какое качество ставить для JPEG или WebP?
Начните с 75-80. На экране это очень трудно отличить от оригинала, а файл часто весит треть того, что пишет камера. Для миниатюр и фонов опускайтесь до 60. Выше 90 файл быстро растёт, а разницы вы не увидите.
AVIF лучше, чем WebP?
По размеру файла да. AVIF обычно на 20-30% меньше WebP, который выглядит так же. WebP кодируется намного быстрее и принимается в большем числе мест. На сайте AVIF с заменой WebP или JPEG даёт и то, и другое.
Почему сжатый файл больше оригинала?
Потому что оригинал уже был меньше того, что выдают новый формат и качество. Так бывает с фото, сохранёнными в PNG, с JPEG, которые до этого уже сильно сжимали, и с качеством около 100. Оставьте оригинал или снизьте качество.
Убирает ли сжатие местоположение из фото?
Да. Результат кодируется из пикселей и не несёт ни EXIF, ни GPS, ни данных камеры. Если хотите увидеть, что содержит фото, прежде чем его отправить, это покажет удаление EXIF из фото, а ещё он умеет очистить файл без повторного кодирования.
Что происходит с анимированным GIF?
Сохраняется только первый кадр, как неподвижное изображение. Этот инструмент не создаёт анимацию.