То, что баннер хорошо выглядит при предпросмотре на компьютере, ещё не значит, что он будет нормально работать на телефоне. Адаптация изображений для мобильных устройств включает конкретный набор проверок: не обрезан ли главный объект, читается ли текст на маленьком экране, не замедляет ли загрузку размер файла, совпадает ли отображение после замены в админпанели. Всё это мало связано с эстетикой — скорее это операции, которые нужно пройти по пунктам перед публикацией.
Почему критерия «хорошо выглядит» недостаточно
Пропорции экрана компьютера и телефона сильно различаются. Одно и то же широкое изображение на широком экране может отображаться полностью, а на узком — обрежется по бокам или сожмётся с искажением. Версия, которую дизайнер утвердил на компьютере, и версия, которую пользователь видит на телефоне, вполне могут быть разными картинками.
Сложнее ещё и то, что на баннере часто есть текст и кнопки. На компьютере размер шрифта кажется подходящим, а на телефоне он может оказаться слишком мелким или из-за переноса строка разобьётся неудобным образом. Если судить только по тому, «как выглядит предпросмотр страницы», эти проблемы до публикации не заметить.
Поэтому критерий адаптации изображений для мобильных устройств стоит сместить с «красиво или нет» на «остаётся ли ключевая информация на узком экране полной, чёткой и загружаемой».
Что проверить перед публикацией
Во-первых, положение главного объекта. Посмотрите баннер в предпросмотре при ширине мобильного экрана и убедитесь, что люди, товары, логотип и другие ключевые элементы не выходят за пределы кадра. Если главный объект смещён к краям, стоит подумать о новой обрезке или смещении его к центру.
Во-вторых, текст на изображении. Если на баннере есть рекламные фразы, даты акции, текст кнопок, проверьте по очереди, полностью ли они отображаются при мобильной ширине, не обрезаны ли и не переносятся ли так, что становятся нечитаемыми. Текст является частью изображения, и исправить его сложнее, чем текст в HTML, поэтому лучше разместить меньше, чем перегружать.
В-третьих, положение кнопок и ссылок. На некоторых баннерах кликабельная область сделана прямо на изображении. После обрезки на мобильном кнопка может оказаться срезанной наполовину, и пользователь не сможет по ней попасть. Перед публикацией нужно реально нажать на неё с телефона и убедиться, что область клика на месте.
В-четвёртых, стыковка изображения с фоном. Если края изображения не совпадают с цветом фона страницы, на телефоне могут появиться заметные цветные блоки или белые полосы. На компьютере такие проблемы не всегда видны.
Размер файла и загрузку тоже нужно учитывать
Мобильные сети гораздо менее предсказуемы, чем офисный широкополосный доступ. Баннер часто является самым крупным изображением на странице. Если его размер не контролировать, при открытии страницы пользователь может сначала увидеть пустое место и ждать, пока изображение загрузится.
Подход такой: сначала экспортируйте изображение под фактический размер отображения, а не сжимайте огромный файл. Какая ширина отображения — под такую и экспортируйте, чтобы телефон не скачивал картинку, значительно превышающую размер экрана. По формату: для фотографий подходят форматы с меньшим размером после сжатия, для изображений с прозрачным фоном или простой графикой — форматы с поддержкой прозрачности. Конкретный выбор зависит от имеющихся инструментов и возможностей админпанели.
После экспорта посмотрите на размер файла. Если он явно великоват, сожмите ещё раз. При сжатии следите, чтобы текст не стал размытым, особенно если на изображении есть мелкий шрифт: чрезмерное сжатие напрямую влияет на читаемость.
Шаги, которые часто пропускают при замене баннера в админпанели
Многие проблемы возникают не на этапе дизайна, а на этапе замены в админпанели. Сотрудник получает новое изображение, сразу загружает и сохраняет, не проверяя его снова на телефоне. В результате на сайте отображается старая картинка или новая растянута.
При замене рекомендуется придерживаться такого порядка: сначала убедиться, что размеры нового изображения совпадают с требованиями админпанели; после загрузки не ограничиваться предпросмотром в панели, а открыть публичную страницу с телефона; убедившись, что изображение отображается нормально, проверить, работает ли ссылка на нём и правильный ли адрес перехода; в конце очистить кэш браузера или посмотреть с другого устройства, чтобы не увидеть закэшированную старую картинку.
Если админпанель поддерживает разные баннеры для разных устройств, нужно отдельно проверить, какое изображение показывается на компьютере и какое на телефоне, чтобы не получилось, что на мобильном всё ещё используется большая версия для компьютера.
Сделайте проверку обязательным действием
Если каждый раз вспоминать о проверке адаптации для мобильных устройств от случая к случаю, что-то легко упустить. Надёжнее сделать это обязательным шагом в процессе публикации: после загрузки баннера открыть публичную страницу с телефона и проверить по пунктам главный объект, текст, кнопки, размер файла и ссылки. Только после этого публикация считается завершённой.
Если в команде несколько операторов, можно включить эти пункты в чек-лист публикации: кто заменяет, тот и проверяет. Тогда даже при смене сотрудника ничего не уйдёт в продакшен только потому, что «выглядит красиво».
В следующий раз, когда будете менять баннер, не спешите оценивать, красив он или нет. Сначала откройте страницу с телефона и пройдитесь по перечисленным пунктам, а потом решайте, нужно ли что-то поправить.
