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

Как решение обрабатывает картинки

Картинка проходит два шага.

Первый — уменьшение на сервере. Для каждого блока задана рамка, например 1200 × 550 точек у слайдера. Картинку крупнее рамки решение уменьшает с сохранением пропорций, чтобы она поместилась в рамку целиком. Картинка меньше рамки не увеличивается: на сайте её растянет браузер, и она станет нечёткой. Поэтому готовьте картинку не меньше рамки из таблиц ниже — крупнее можно.

Второй — показ в блоке. Тут блоки ведут себя по-разному:

• показывают картинку целиком — баннеры на главной и в каталоге, фото товаров, логотипы брендов, плитки категорий. Высота блока подстраивается под пропорции картинки, ничего не срезается;

• заполняют блок и срезают края — слайдеры, баннер в шапке, обложки историй, карточки акций, новостей и коллекций. Если пропорции картинки не совпадают с блоком, лишнее по краям не видно. Важное держите ближе к центру.

Формат — JPG или PNG. Отдельно готовить WebP не нужно: на сервере по расписанию для загруженных картинок создаются копии в WebP, и браузер, который его понимает, получает их сам. Задачи перечислены в статье cron.

Слайдер на главной странице

Картинку для телефона слайд берёт из отдельного поля; если оно пустое — основную, уменьшенную целиком до 420 точек в ширину, и мелкий текст на ней станет нечитаемым. Какие поля заполнять — в статье Слайдер на главной странице.

Высоту слайдера задаёт картинка: решение берёт пропорции самого высокого слайда. Остальные слайды заполняют ту же рамку и срезаются по краям, поэтому готовьте все слайды одного размера. На экране шириной от 1536 точек слайдер рядом с товаром дня занимает 1110 × 509 точек, без товара дня — 1488 точек в ширину. На экранах уже слайдер сужается, пропорция сохраняется.

Видео заполняет слайд целиком и выравнивается по центру. Готовьте ролик в тех же пропорциях, что и картинки: более высокий обрежется сверху и снизу, более широкий — по бокам.

Баннеры на главной странице

Баннеры одной позиции встают в ряд и делят ширину поровну, поэтому рамка зависит от того, сколько баннеров в позиции.

Баннер показывается целиком, высоту выбираете вы — в пределах 1000 точек. На демо-сайте два баннера в позиции сделаны 775 × 388 (пропорция 2 : 1), баннер в block4 — вертикальный 1 : 3. В одной позиции держите картинки одинаковых пропорций.

На телефоне у баннера может быть своя картинка, рамка у всех позиций одна — 400 × 1000. Баннеры block1–block3 идут по два в ряд, а если их нечётное число, последний занимает всю ширину. block4 — во всю ширину.

Какие поля заполнять — в статье Баннеры на главной странице.

Баннеры в каталоге

Баннер показывается целиком, высоту выбираете вы. Над списком товаров он занимает ширину колонки с товарами — около 1236 точек на экране от 1536, под фильтром — около 230 точек. Для телефона у баннера может быть своя картинка.

Какие поля заполнять — в статье Баннеры в разделе товаров.

Баннер в шапке

Полоса высотой 56 точек во всю ширину окна, рамка — 1920 × 56. Картинка заполняет полосу и срезается по краям на экранах уже неё: важное держите в центральной части шириной 1200 точек.

Для телефона нужна своя картинка той же высоты, 56 точек. На демо-сайте она 420 × 56.

Истории

Обложка — вертикальная, пропорция 9 : 16. Решение обрезает её точно под 229 × 407 точек, поэтому картинка другой формы потеряет края. Готовьте обложку не меньше 229 × 407.

Слайды истории — рамка 1200 × 2400. Подойдут вертикальные картинки под экран телефона, например 1080 × 1920.

Подробнее — в статье Истории.

Категории

Картинка раздела показывается в плитке с пропорцией 3 : 2 — в популярных категориях на главной, на странице каталога и в подразделах. Картинка показывается в плитке целиком: если её форма другая, по краям останутся поля.

Рекомендуемый размер — 540 × 360.

Товары

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

Рамки: в списке товаров — 280 × 500 на компьютере и 190 × 380 на телефоне. На странице товара фото показывается шириной до 660 точек, высоту ограничивает настройка Максимальная высота изображения на странице товара. Для увеличения при наведении рамка 1200 × 2400 — поэтому фото лучше готовить не меньше 1200 точек по ширине: например, 1200 × 1200, если в настройке 1 / 1.

Товар дня на главной показывает те же фотографии товара, отдельной картинки для него нет.

Бренды

Логотип показывается целиком в плитке 16 : 9 на сером фоне. Рамка — 210 × 170 в списке брендов и 170 × 80 на странице бренда. Лучше всего подходит горизонтальный логотип на белом или прозрачном фоне.

Слайдер на странице бренда — рамка 1600 × 1600 на компьютере и 750 × 750 на телефоне, для телефона у слайда может быть своя картинка. Как и у слайдера на главной, высоту задаёт самый высокий слайд, остальные срезаются по краям — готовьте все слайды одного размера.

Акции, новости, статьи, коллекции

Картинка в карточке — плитка 3 : 2, картинка заполняет её и срезается по краям. Рекомендуемый размер — 600 × 400.

Картинка на странице акции или новости — рамка 1500 × 1500, если картинка выводится во всю ширину, и 600 × 600, если слева или справа от текста.

Другие изображения

Размеры для этих элементов описаны в их статьях:

• Логотип

• favicon — 512 × 512

• Значки платёжных систем — 70 × 40

• Баннер при заходе в приложение

• Материалы для публикации приложения

Проверка

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