Изображения и медиа
Обновлено
Изображения блоков темы и изображения приложений настраиваются по-разному. Картинки товара принадлежат «Магазину», фотографии альбома — «Фото», а фоновый кадр первого экрана обычно хранится в настройках темы.
Изображения в настройках темы
Загрузка через поле картинки сохраняет один файл. Тема не создаёт серверные эскизы загруженного изображения: большой исходник может уйти и на телефон. Для лёгкой адаптивной загрузки подготовьте несколько ширин одного кадра. Владелец может загрузить их рядом в «Сайт → Файлы», а специалист — разместить в собственных файлах копии темы, как описано в статье о собственном коде.
Например, для карточки подготовьте banner-480.webp, banner-640.webp и banner-960.webp, а в поле выберите основной файл кнопкой «Из файлов сайта» или укажите путь /wa-data/public/site/img/banner-640.webp. Тема сама найдёт рядом файлы других ширин с тем же именем и передаст их браузеру, а он выберет подходящий. Отсутствующие ширины просто пропускаются, ошибок не будет. Ширина в имени — число из трёх-четырёх цифр в конце: slide-01.webp не считается файлом шириной 01. Не увеличивайте маленький исходник до большей ширины и не рассчитывайте на автоматическое создание отсутствующих файлов.
Какие размеры готовить
Так работают все стандартные блоки с картинкой из настроек темы. Пропорция — та, в которой блок показывает кадр: лишнее обрезается по центру, поэтому готовьте кадр сразу в ней. Основной файл — тот, который выбирается в поле.
| Блок | Пропорция | Ширины | Основной файл |
|---|---|---|---|
| «Большие баннеры» — кадр | по настройке «Пропорции баннера на компьютере» | 960, 1400, 1920 | 1400 |
| «Большие баннеры» — кадр для телефона | по мобильной настройке, «Авто» — 16:10 | 480, 640, 960 | 960 |
| «Большие баннеры» — плитки сбоку | 16:10 | 240, 320, 384, 480, 640, 960 | 640 |
| «Баннеры-плитки» | по настройке «Пропорции плитки», по умолчанию 4:3 | 320, 480, 640, 960, 1400 | 640 |
| «О компании» | по настройке пропорций фото, по умолчанию 1:1 | 640, 960, 1400 | 960 |
| «Обложка» с фото сбоку | 4:3 | 640, 960, 1400 | 960 |
| «Обложка» с фото фоном и по центру | 16:9 | 960, 1400, 1920 | 1400 |
| «Призыв» — фото фоном | 16:7 | 960, 1400, 1920 | 1400 |
| «До и после» | 4:3, оба кадра одной пропорции и с одной точки съёмки | 640, 960, 1400 | 960 |
| «Объекты» | по настройке пропорций фото, по умолчанию 4:3 | 480, 640, 960 | 640 |
| «Мастера» (команда) | 3:4, портрет | 480, 640, 960 | 640 |
| «Проекты» — обложка, заданная адресом картинки | 4:3 | 480, 640, 960 | 640 |
| Блоки страниц «Первый экран страницы» и «Текст» | 4:3 | 640, 960, 1400 | 960 |
| «Логотипы клиентов» | по настройке пропорций | SVG или растр 160, 240, 320, 480 | — |
Названия блоков в панели у конфигураций могут отличаться. В собственном блоке учитывайте реальную ширину картинки. Для внешних адресов соседние файлы не подбираются. Подбор размеров работает для локальных файлов сайта, в том числе собственных картинок темы.
Другой кадр для телефона
Разные ширины одного кадра и другая композиция на телефоне решают разные задачи. У слайда «Больших баннеров» есть отдельное поле «Кадр для телефона»: используйте его для другого кадрирования, например с человеком по центру вместо широкой панорамы. Можно загрузить один файл шириной около 960 px или подготовить соседние копии 480, 640 и 960 px в пропорции, выбранной в «Пропорциях баннера на телефоне»; если там «Авто», готовьте кадр 16:10, например 960×600. Обычные копии разных размеров сохраняют композицию исходника.
Картинки первых семи слайдов можно загрузить с компьютера в «Главная страница → Большие баннеры → Картинки слайдов с компьютера»: для каждого слайда — «картинка для компьютера» (16:5, например 1504×470) и «картинка для телефона». Заполненное поле заменяет картинку слайда в списке «Слайды». Это обычная загрузка одного файла, без копий разной ширины.
Вместо картинки слайд может показывать видео MP4 — картинка слайда служит его обложкой. Играет только видимый слайд; посетитель, отключивший анимацию в системе, видит обложку.
После замены проверьте телефон и компьютер: важные детали должны оставаться видимыми при обрезке. Текст лучше задавать текстовым полем блока, а не впечатывать в изображение.
Товары, категории, записи и альбомы
Фотографии товара загружайте в карточку товара. Изображение записи — в запись «Блога», фотографии альбома — в «Фото». Эскизы нужных размеров для них создаёт само приложение, готовить отдельные ширины не нужно. Настройка источника блока выбирает данные этих приложений; она не переносит фотографии между ними.
На странице товара фото открываются в окне просмотра с миниатюрами и увеличением: колесом мыши или жестом щипка на телефоне; увеличенный снимок можно перемещать. После закрытия галерея остаётся на последнем просмотренном кадре. Подробнее — в статье о странице товара.
Блоки категорий могут использовать изображения категории и интеграцию плагина изображений, если он установлен. Набор полей и источник изображения проверяйте в настройках выбранного блока и интеграциях. Название и содержание записи редактируются в «Блоге», а расположение и количество карточек — в теме.
Форматы и проверка
Для фотографий блоков используйте WebP, для логотипов и иконок — SVG. Для превью ссылки в соцсетях подходит JPEG или PNG размером 1200×630: общая картинка задаётся в «Прочее → Микроразметка → Картинка для соцсетей», а на страницах товаров и записей используется их собственное изображение. Растровый логотип готовьте вдвое больше высоты, с которой он показывается в шапке.
Задайте осмысленное альтернативное описание, когда оно доступно в настройках. Проверьте отсутствие растяжения, сломанных изображений и тяжёлой загрузки на телефоне. Собственные шаблоны должны сохранять размер или пропорцию изображения, чтобы страница не прыгала при загрузке.