Сжатие и конвертация изображений

Когда сжатие действительно нужно

Фотография с современного телефона обычно весит от 3 до 6 МБ и имеет ширину около 4000 пикселей. Почти ни одному месту, куда вы её отправите, столько не нужно. Баннер на сайте показывается шириной 1600 пикселей или меньше, вложение в письме и так уменьшается почтовой программой, а отправка в WhatsApp или Slack пересжимается по пути. Если сжать заранее, отправка идёт быстрее, страницы загружаются быстрее, места уходит меньше, и в большинстве случаев разницу никто не замечает.

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

Как выбрать качество

Ползунок качества соответствует параметру качества кодировщика, и шкала эта не линейная. Разница между 100 и 90 это обычно большое падение размера без заметных изменений, а разница между 60 и 50 уже начинает давать блоки и грязь на ровных участках вроде неба и кожи. Ориентир такой:

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

Какой формат выбрать на выходе

• WebP сегодня лучший общий выбор для веба. Он на 25 до 35 % легче JPG при том же видимом качестве, поддерживает прозрачность, и его понимают все современные браузеры.
• AVIF сжимает ещё сильнее, часто вдвое лучше JPG, но кодируется в браузере медленно, и некоторые старые устройства и программы его не открывают. Берите его, когда размер важнее всего и вы точно знаете, где изображение будет показано.
• JPG это универсальный вариант. Его принимает любая форма, любой маркетплейс и любая старая программа. Прозрачности у него нет.
• PNG подходит логотипам, скриншотам и всему, что должно остаться без потерь или с прозрачным фоном.

Если вы не уверены, куда пойдёт файл, берите JPG. Если изображение точно для вашего сайта, берите WebP.

Максимальная ширина важнее качества

Самая частая ошибка это сжимать фотографию шириной 4000 пикселей до качества 60 и оставлять её огромной. Правильный порядок обратный: сначала приведите изображение к размеру, в котором оно будет показано, и только потом сжимайте. Фотография в 1600 пикселей с качеством 85 почти всегда и легче, и выглядит лучше, чем фотография в 4000 пикселей с качеством 50. Для точных значений есть отдельный инструмент изменения размера.

Про метаданные

Снимки с телефона несут в себе EXIF: модель камеры, дату и часто точные координаты GPS. При пересборке изображения здесь эти данные не переносятся в результат, поэтому фото, опубликованное после обработки, не выдаёт, где оно снято. Если вам нужно сохранить дату съёмки для архива, держите оригиналы отдельно.

Почему это происходит на вашем устройстве

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