Как уменьшить вес изображения и сохранить нужные детали
Большая фотография может выглядеть отлично на экране редактора и при этом замедлять страницу для посетителя с мобильным интернетом. Но решение «сжать всё до минимума» тоже плохое: мелкий текст на скриншоте и контуры схемы быстро становятся нечитаемыми. Подготовку изображений стоит начинать с назначения файла, а не с произвольного процента качества.
Определите роль картинки
Для фотографии обычно важны естественные переходы цвета; для схемы — чёткие линии и подписи; для иконки — прозрачность и малый размер. Проверьте также фактическую ширину блока на сайте. Если посетителю показывают картинку в узкой колонке, хранить файл шириной в несколько тысяч пикселей часто бессмысленно. Сначала уменьшите размеры до разумных, затем подбирайте формат и качество.
Для сравнения нескольких вариантов можно воспользоваться сжатием изображения в JPEG или WebP. Сделайте два-три варианта с разным качеством и посмотрите их в масштабе, близком к реальному отображению. Ищите не только разницу в байтах, но и полосы на градиентах, расплывшийся текст, шум вокруг контрастных границ.
Простая процедура проверки
- Сохраните исходник отдельно: повторное сжатие уже сжатого файла может постепенно портить изображение.
- Выберите ширину под место публикации, учитывая экраны с высокой плотностью пикселей.
- Сравните форматы на одном и том же содержимом, не только по названию расширения.
- Откройте результат на светлом и тёмном фоне, если прозрачность имеет значение.
- Проверьте подписи, лица и мелкие элементы — именно там потери заметнее всего.
Размер файла — не единственная метрика
Оптимизация полезна, когда изображение остаётся пригодным для своей задачи. Схема на 30 КБ, которую невозможно прочитать, хуже версии на 80 КБ. Для важных визуальных инструкций стоит добавить текстовое описание рядом с картинкой: оно помогает и тем, кто не видит изображение, и тем, у кого оно не загрузилось.
После подготовки не забудьте проверить страницу целиком. Слишком тяжёлое изображение — лишь одна причина медленной загрузки; важны также размеры в разметке, число файлов и порядок их загрузки. Комбинация разумного разрешения, подходящего формата и визуальной проверки обычно даёт более надёжный результат, чем один «магический» уровень сжатия.