Мобильная версия — это не уменьшенный desktop
На телефоне картинка занимает меньше пикселей, но загружается нередко в более сложных условиях: мобильная сеть нестабильна, процессор слабее, а пользователь листает страницу быстрее. Если браузер получает многомегабайтную фотографию и просто сжимает её CSS-стилями, визуально всё может выглядеть правильно, однако время и трафик уже потрачены.
Начните с реальной ширины блока. Контентная картинка на экране телефона обычно заметно уже исходного файла. Для экранов высокой плотности нужен запас, но изображение шириной 5000 пикселей почти никогда не оправдано.
Подготовьте варианты, а не один компромисс
Хорошая веб-система отдаёт разные размеры через srcset или аналогичный механизм. Браузер сам выбирает файл под экран и плотность пикселей. Если CMS этого не делает, подготовьте хотя бы отдельный разумный размер для основной точки использования.
Разные экраны могут требовать и разного кадрирования. Широкий баннер с человеком справа на узком экране превращается в полоску, где лицо едва видно. Иногда мобильной версии нужна отдельная вертикальная композиция, а не механическая обрезка центра.
Уменьшайте до сжатия
Сначала используйте «Изменить размер изображения», затем выполняйте сжатие. Сжимать огромный оригинал, а после уменьшать его — значит тратить время на лишние данные и хуже контролировать итог. Сохраняйте пропорции, иначе лица и предметы растянутся.
После изменения размера откройте файл в предполагаемой ширине. При увеличении на весь монитор он может казаться мягким, хотя на телефоне выглядит отлично. Оценивать нужно в контексте использования.
Не гонитесь за рекордным весом
Сильное сжатие особенно заметно на фотографиях с волосами, травой, мелким текстом и плавными тенями. Подберите настройки на сложном изображении и примените их к серии, затем выборочно проверьте результат. Для главного баннера можно оставить больше качества, чем для маленьких превью.
Формат тоже влияет на вес. WebP часто полезен в вебе, JPEG остаётся предсказуемым выбором для фотографии, а PNG нужен для прозрачности и чёткой графики. Не переводите все изображения в один формат без проверки.
Берегите первый экран
Крупное изображение в верхней части страницы влияет на момент, когда пользователь увидит основной контент. Оно должно иметь заранее известные размеры, чтобы страница не прыгала после загрузки. Изображения ниже первого экрана можно загружать лениво, но главную картинку не стоит откладывать без причины.
Не маскируйте тяжёлый файл прелоадером. Анимация объясняет ожидание, но не сокращает его. Сначала уменьшите фактический объём данных.
Проверьте на настоящем телефоне
Режим мобильного экрана в браузере полезен для геометрии, но не полностью воспроизводит устройство и сеть. Откройте страницу на телефоне, отключите Wi-Fi и пройдите основной сценарий. Посмотрите, успевают ли картинки появляться, не дёргается ли контент, можно ли прочитать текст на изображении.
Проверяйте не одну страницу. Каталог из двадцати лёгких карточек способен передать больше данных, чем одна обложка. Следите за повторным использованием файлов и тем, не загружаются ли скрытые изображения карусели сразу.
Практический минимум
- размеры файла близки к реальному отображению;
- для крупных блоков предусмотрено мобильное кадрирование;
- сжатие проверено на сложных деталях;
- первый экран не ждёт лишние изображения;
- для изображений заданы ширина и высота;
- страница испытана на мобильной сети;
- оригиналы хранятся отдельно.
Оптимизация не должна превращать картинку в размытое пятно. Её цель — не передавать телефону пиксели, которые пользователь всё равно не увидит.