Главное изображение первым попадается на глаза посетителю магазина спортивных товаров. Оно должно объяснить, что здесь продают, показать уровень товара и подвести к следующему шагу. Ошибка в выборе материала часто незаметна. Эффектный кадр с забега может оказаться бесполезным, если человек пришёл за детскими кроссовками на осень и не нашёл их глазами.
Что главное изображение должно сделать на первом экране
У первого экрана три рабочие задачи. Посетитель должен за пару секунд понять категорию, увидеть сам товар или понятный сценарий его использования и заметить кнопку, которая ведёт в каталог. Если изображение красивое, но не помогает ни в одном из этих действий, оно занимает место, которое могла бы занять навигация.
Если у магазина несколько направлений (бег, зал, велосипеды, туризм), один баннер на главной не подойдёт всем. Выберите направление с самым стабильным спросом, а для остальных сделайте свои первые экраны на страницах разделов.
Фото в действии, предметная съёмка или видео: что подходит вашему ассортименту
Фото в действии передаёт сценарий: бегун на набережной, группа в горах. Но товар в таком кадре легко теряется. Проверьте, различимы ли модель куртки, тип подошвы, цвет. Если нет, кадр создаёт настроение, а не продаёт.
Предметная съёмка на чистом фоне точно показывает вещь. Она подходит узкому ассортименту и технически сложным товарам: ракеткам, велосипедам, лыжам. Минус в том, что такой кадр выглядит холодно и плохо отличает вас от других магазинов.
Короткое видео без звука показывает движение ткани, посадку, динамику. При этом оно тяжелее, требует постера на время загрузки и запасного статичного варианта. Важный текст внутрь видео помещать нельзя.
Графика и иллюстрации уместны для акций и сезонных подборок, но не должны заменять товар в основном экране магазина.
Условный пример: первый экран раздела «Бег осенью»
Это иллюстрация подхода, а не описание реального проекта. Слева находятся заголовок «Экипировка для бега в прохладную погоду», подзаголовок «Куртки, тайтсы, перчатки и кроссовки с протектором для мокрого асфальта» и кнопка «Подобрать по сезону». Справа расположено фото бегуна на городской набережной в сумерках, в кадре крупно видна куртка со светоотражающими вставками.
Такой вариант работает по понятным причинам. Сценарий совпадает с запросом посетителя. Товар виден, и ту же куртку он найдёт в карточках ниже. Тёмная часть кадра даёт спокойный фон для текста. На телефоне текст идёт над изображением, а кадр обрезан по фигуре бегуна, а не по пустому небу. Альтернативный текст описывает содержание: «Бегун в лёгкой куртке со светоотражающими вставками на городской набережной».
Как подготовить файл, чтобы он не тормозил страницу и не терял смысл на телефоне
- Храните исходник в высоком разрешении, но на сайт отдавайте несколько размеров через srcset, чтобы телефон не загружал файл для широкого монитора.
- Используйте WebP или AVIF с запасным JPEG для старых браузеров.
- Главное изображение не нужно загружать «лениво»: оно должно появляться сразу. Ленивая загрузка нужна картинкам ниже первого экрана.
- Задайте пропорции, чтобы после загрузки кадра страница не сдвигалась.
- Заранее определите фокусную точку: при обрезке на узком экране товар или лицо не должны выпасть из кадра.
- Не вшивайте текст в картинку. Он станет мелким на телефоне, а скринридер его не прочитает. Заголовок и кнопку делайте обычным текстом поверх подложки или градиента с достаточным контрастом.
Проверяйте результат на реальном телефоне, при возможности через медленное соединение, а не только в уменьшенном окне браузера на компьютере.
Права, сезонность и поддержка: что решить до съёмки
Если вы берёте стоковые фотографии, убедитесь, что лицензия допускает коммерческое использование на сайте. Для кадров с людьми уточните у поставщика или фотографа, оформлены ли необходимые разрешения. Материалы брендов-производителей используйте на условиях, которые указывает поставщик, и при сомнениях запросите их письменно.
Сезонность закладывайте в устройство сайта. Если смена баннера требует разработчика, зимний кадр останется на сайте до лета. Сделайте в панели управления блок, где менеджер сам заменит изображение, заголовок и ссылку. Если на первом экране показан конкретный товар, свяжите его с наличием, чтобы не вести посетителя на страницу с пометкой «нет в продаже».
Проверочный список перед публикацией
- Понятно ли за пару секунд, какую категорию товаров представляет кадр?
- Виден ли в кадре товар, который есть в каталоге и в наличии?
- Сохраняется ли смысл при обрезке под экран телефона?
- Читается ли текст на изображении, вынесен ли он из картинки в обычный текст?
- Есть ли несколько размеров файла и современный формат?
- Подтверждены ли права на изображение и участие людей в кадре?
- Может ли сотрудник магазина сменить изображение без разработчика?
- Заполнен ли альтернативный текст, описывающий кадр, а не набор ключевых слов?
