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

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

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

Форматы с потерями — JPEG, WebP и AVIF — безвозвратно отбрасывают часть информации в обмен на гораздо меньший вес. Форматы без потерь, такие как PNG, перестраивают данные эффективнее, ничего не отбрасывая: изображение остаётся идентичным пиксель за пикселем, но предел уменьшения заметно выше.

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

Изображения обычно самая тяжёлая часть веб-страницы — нередко тяжелее, чем HTML, CSS, JavaScript и шрифты вместе. Поэтому именно с них стоит начинать, когда страница кажется медленной.

Слишком крупные изображения напрямую влияют на Largest Contentful Paint — одну из метрик Core Web Vitals Google. Изображение в шапке, которое загружается три секунды, задерживает момент, когда посетитель видит рабочую страницу, а на мобильной связи эффект усиливается. Надёжно помогают три изменения: сжимать до разумной цели, отдавать изображения в тех размерах, в которых они действительно отображаются, и предпочитать WebP там, где вы управляете разметкой.

Формы загрузки часто устанавливают жёсткий предел. Заявки на работу, университетские порталы, визовые документы и регистрации на экзамены обычно ограничивают фотографии и сканы подписи до 20 КБ, 50 КБ, 100 КБ или 200 КБ и отклоняют всё, что превышает лимит, без объяснений.

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

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

Сохранение фотографий в PNG — другая частая ошибка: результат нередко в несколько раз тяжелее равнозначного JPEG без видимой выгоды. И нет смысла сжимать значительно ниже необходимого: если форма допускает 200 КБ, продавливание до 40 КБ без причины стоит заметного качества.