Сжатие изображений

О компрессоре изображений

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

Два способа уменьшить изображение

Уменьшение изображения по сути сводится к двум рычагам:

• Сжатие с потерями (ниже качество). Немного снизить точность цвета каждого пикселя. Глаз почти не замечает, а файл может уменьшиться более чем вдвое. Так работают JPG и WebP. Около 80 % качества — обычно оптимум между точностью и размером; ниже 70 % начинает появляться шум.
• Ниже разрешение (масштабирование). Снизив 4000×3000 до 1600×1200, вы убираете 85 % пикселей, и размер резко падает. Фотографии с телефонов обычно имеют куда большее разрешение, чем нужно: изображению на веб-странице редко требуется ширина более 1200 пикселей.

Этот инструмент даёт оба способа: ползунок качества управляет первым, максимальная длина стороны — вторым. Самый действенный подход — сначала уменьшить размеры, затем качество.

Рекомендуемые настройки по назначению

• Изображение для веб-страницы: максимальная сторона 1600, качество 80 %. Типичный баннер блога может уйти с 3 МБ до менее 200 КБ.
• Фото на документы / для заявки: большинство платформ ограничивают их 2 МБ или 500 КБ. Не масштабируйте (можете нарушить требуемое соотношение сторон); просто поставьте качество 85 %.
• Отправка «в исходном качестве» в чате: максимальная сторона 2048, качество 85 %. На экране телефона это неотличимо от оригинала.
• Архивирование скриншотов: скриншоты в основном состоят из однотонных областей, поэтому и при 90 % качества они хорошо сжимаются. Можно смело использовать.
• Изображения товаров / для магазина: большинство платформ хотят квадраты 800×800 или 1500×1500. Зафиксируйте максимальную сторону на требуемом значении и используйте около 88 % качества.

Почему некоторые изображения не сжимаются

Если размер изображения почти не меняется, обычно это один из случаев:

• Оригинал уже сжатый JPG. Для второго прохода мало места: переход с 85 % на 80 % экономит совсем немного. К тому же повторное сжатие накапливает повреждения, так что качество падает каждый раз.
• Фотография, сохранённая как PNG. PNG — формат без потерь, созданный для штриховой графики, значков и изображений с альфа-каналом. Хранить фотографию в PNG означает огромный файл; правильный ход — перевести в JPG. В браузере настройка качества почти не влияет на PNG.
• Изображение уже маленькое. При размере менее примерно 100 КБ выиграть почти нечего, а повторное кодирование может даже увеличить файл — поэтому инструмент по умолчанию оставляет меньший вариант.
• Изображение полно деталей. Листва, трава, гравий, фейерверк — высокочастотные текстуры меняются в каждом блоке, и алгоритму сжатия негде срезать углы.

О приватности: ваши изображения действительно не загружаются

Этот пункт заслуживает отдельного раздела. Страница использует встроенную в браузер API рисования на Canvas: изображение считывается в память, рисуется на холсте и заново экспортируется с заданным вами качеством. Ни одна строка кода никуда не отправляет данные.

Проверить легко: нажмите F12, чтобы открыть инструменты разработчика, перейдите на панель «Сеть», затем нажмите «начать сжатие». В списке не появится запрос на загрузку изображения. Можно также просто отключить сеть и попробовать снова — работает точно так же.

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

Сохранение качества после сжатия

Несколько практических проверок:

• Сначала посмотрите на края текста. Сжатие с потерями первым делом повреждает область вокруг чёрного текста — он размывается или получает цветную кайму. Если текст остался чётким, качество в порядке.
• Затем посмотрите на плавные градиенты. Небо и стены — большие мягкие переходы — первыми показывают полосы. Заметные полосы означают, что вы сжали слишком сильно.
• Напоследок судите по назначению. Для изображения, которое смотрят только на экране телефона, сравнение при 100 % увеличении бессмысленно. Для того, что пойдёт в печать, по возможности сохраняйте исходное разрешение.

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

Связанные инструменты