# Размеры изображений

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

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

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

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

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

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

**Формат** — JPG или PNG. Отдельно готовить WebP не нужно: на сервере по расписанию для загруженных картинок создаются копии в WebP, и браузер, который его понимает, получает их сам. Задачи перечислены в статье [cron](/s/marketpro/doc/cron-uknObkicoh).

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

| Рамка | Компьютер | Телефон |
|-------|-----------|---------|
| Справа показывается [Товар дня](/s/marketpro/doc/tovar-dnya-gVselhdASV) | 1200 × 550 | 420 × 200 |
| Товара дня нет | 1550 × 550 | 420 × 200 |

Картинку для телефона слайд берёт из отдельного поля; если оно пустое — основную, уменьшенную целиком до 420 точек в ширину, и мелкий текст на ней станет нечитаемым. Какие поля заполнять — в статье [Слайдер на главной странице](/s/marketpro/doc/slajder-na-glavnoj-stranice-kfKTfffuR1).

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

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

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

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

| Позиция | Рамка на компьютере | Ширина на сайте при экране от 1536 точек |
|---------|---------------------|------------------------------------------|
| `block1`–`block3`, один баннер | 1550 × 1000         | 1488                                     |
| `block1`–`block3`, два баннера | 775 × 1000          | 732                                      |
| `block1`–`block3`, три баннера | 517 × 1000          | 480                                      |
| `block4`, узкая колонка | 550 × 1000          | 354                                      |

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

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

Какие поля заполнять — в статье [Баннеры на главной странице](/s/marketpro/doc/bannery-na-glavnoj-stranice-MdeDWm5VQp).

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

| Позиция | Компьютер | Телефон |
|---------|-----------|---------|
| Над списком товаров | 1300 × 2000 | 400 × 2000 |
| Под фильтром, слева от товаров | 250 × 1000 | не показывается |

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

Какие поля заполнять — в статье [Баннеры в разделе товаров](/s/marketpro/doc/bannery-v-razdele-tovarov-dljJ1jHPJN).

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

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

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

# Истории

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

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

Подробнее — в статье [Истории](/s/marketpro/doc/istorii-T5KSsERgYi).

# Категории

Картинка раздела показывается в плитке с пропорцией **3 : 2** — в [популярных категориях](/s/marketpro/doc/populyarnye-kategorii-iDluT39qzq) на главной, на странице каталога и в подразделах. Картинка показывается в плитке целиком: если её форма другая, по краям останутся поля.

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

# Товары

Форму карточки товара задаёт настройка **Соотношение сторон изображений товаров** — она описана в статье [Настройки каталога](/s/marketpro/doc/nastrojki-kataloga-4wB0Uc8OT1). Если поле пустое, пропорцию решение берёт по фотографиям. Готовьте фото в той пропорции, что указана в настройке, — тогда карточки в списке встанут ровно. Фото показывается целиком, без обрезки.

Рамки: в списке товаров — 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, если слева или справа от текста.

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

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

* [Логотип](/s/marketpro/doc/logotip-7Q5iGZosxV)
* [favicon](/s/marketpro/doc/favicon-pD0FVUqJG0) — 512 × 512
* [Значки платёжных систем](/s/marketpro/doc/znachki-platyozhnyh-sistem-FOXf7EDMdz) — 70 × 40
* [Баннер при заходе в приложение](/s/marketpro/doc/banner-pri-zahode-v-prilozhenie-QP3fxkRAnd)
* [Материалы для публикации приложения](/s/marketpro/doc/materialy-dlya-publikacii-prilozheniya-s8HOYF73bx)

# Проверка

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

---

**Documents**

- [Установка решения](https://docs.astdesign.ru/s/marketpro/doc/ustanovka-resheniya-Z8Q6r79liU)
- [FAQ перед покупкой](https://docs.astdesign.ru/s/marketpro/doc/faq-pered-pokupkoj-HPgKP7mWDT)
- [Общая настройка](https://docs.astdesign.ru/s/marketpro/doc/obshaya-nastrojka-Io6HZQaGXf)
- [Шаблон](https://docs.astdesign.ru/s/marketpro/doc/shablon-ylLAFZV3o8)
- [Главная страница](https://docs.astdesign.ru/s/marketpro/doc/glavnaya-stranica-7PwYozaVVo)
- [Магазины (склады)](https://docs.astdesign.ru/s/marketpro/doc/magaziny-sklady-7rEEZJrA45)
- [Каталог](https://docs.astdesign.ru/s/marketpro/doc/katalog-FpnYzZr900)
- [Поиск](https://docs.astdesign.ru/s/marketpro/doc/poisk-xsDdFVh5h0)
- [Текстовые страницы](https://docs.astdesign.ru/s/marketpro/doc/tekstovye-stranicy-jVtNXZv3T5)
- [Реклама и маркетинг](https://docs.astdesign.ru/s/marketpro/doc/reklama-i-marketing-iZkaCoxr5b)
- [Региональность](https://docs.astdesign.ru/s/marketpro/doc/regionalnost-bCuM9AOBNO)
- [Корзина](https://docs.astdesign.ru/s/marketpro/doc/korzina-Mh27pZA7v9)
- [Оформление заказа](https://docs.astdesign.ru/s/marketpro/doc/oformlenie-zakaza-VyvQjOQxZo)
- [Авторизация](https://docs.astdesign.ru/s/marketpro/doc/avtorizaciya-5HwEb1oDJG)
- [SEO и аналитика](https://docs.astdesign.ru/s/marketpro/doc/seo-i-analitika-d1Hw6c4YAM)
- [Уведомления](https://docs.astdesign.ru/s/marketpro/doc/uvedomleniya-SKDyjYg14J)
- [Мобильное приложение](https://docs.astdesign.ru/s/marketpro/doc/mobilnoe-prilozhenie-F5E0hT7TnN)
- [Обновление решения](https://docs.astdesign.ru/s/marketpro/doc/obnovlenie-resheniya-RRRgtxV5uH)
- [Для разработчика](https://docs.astdesign.ru/s/marketpro/doc/dlya-razrabotchika-WJePeJCmpy)
- [Интеграции](https://docs.astdesign.ru/s/marketpro/doc/integracii-D3DqjYOZYm)
- [Что делать, если что-то не работает](https://docs.astdesign.ru/s/marketpro/doc/chto-delat-esli-chto-to-ne-rabotaet-Q8L8sTVJF8)