Как вставить картинки для баннера (слайдера) на главной странице?

Начиная с 49 типового шаблона изменилась схема добавления иллюстраций в баннеры (слайдер) на главной странице сайта.

Вставка картинок для баннера (слайдера) на главной странице

Чтобы иллюстрации в слайдере корректно отображались на всех устройствах (десктопах, планшетах и мобильных телефонах) и не замедляли загрузку страницы, необходимо подготовить четыре варианта каждой картинки с разными размерами. Это позволит оптимизировать изображения под различные разрешения экранов и увеличить скорость загрузки сайта.

Оригинальный размер — для отображения на широкоформатных экранах, например, 1920x1080 пикселей (с разрешением 72 точки на дюйм (DPI)).
Большой размер — для отображения на широкоформатных экранах, например, 1920x1080 пикселей.
Средний размер — для планшетов и ноутбуков, например, 1024x768 пикселей.
Малый размер — для мобильных устройств, например, 640x480 пикселей.

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

В слайдер можно добавить несколько разных изображений, которые будут автоматически сменять друг друга, создавая динамичный и привлекательный визуальный эффект. Важно учитывать, что количество загружаемых картинок напрямую влияет на скорость загрузки страницы. Чем больше изображений вы добавляете, тем больше данных требуется загрузить браузеру, что может замедлить работу сайта, особенно на мобильных устройствах или при медленном интернет-соединении.

Что необходимо сделать для добавления иллюстраций в слайдер (центральное баннерное поле):

Выберите необходимые картинки в наибольшем разрешении, например, 1920x1080 пикселей (это будет основная картинка для десктопной версии).
Далее исходя из размера 1920x1080, нужно создать еще 3 пропорционально уменьшенные копии для каждой из картинок в разрешении, это будут соответственно размеры:
- 1440x800 пикселей — для большого размера
- 768х426 пикселей — для среднего размера
- 480х266 пикселей — для малого размера
Важно! Оптимальная высота/ширина картинок в зависимости от выбранного шаблона могут отличаться. Обращайтесь для уточнения по размерам к персональному менеджеру.
Переведите (сконвертируйте) все иллюстрации в формат webp (можно использовать сервисы: https://tinypng.com/, https://squoosh.app/, https://compressor.io/, https://imageoptim.com/, https://convertio.co/, https://www.iloveimg.com, https://webp-converter.com/)

Конвертация изображений в формат WebP — эффективный способ значительно уменьшить размер файлов без потери визуального качества. По сравнению с традиционными форматами, такими как JPEG и PNG, WebP обеспечивает лучшее сжатие, что позволяет сократить объем данных, загружаемых браузером. Это особенно важно для повышения скорости загрузки сайта, что напрямую влияет на пользовательский опыт и SEO-показатели.

Использование формата WebP очень актуально для сайтов с большим количеством изображений, таких как интернет-магазины и интернет-каталоги.

Итак, у вас есть по 4 набора картинок для добавления в слайдер. Чтобы не запутаться с названиями, называйте файлы следующим образом:
- central-banner-1-1920.webp
- central-banner-1-1440.webp
- central-banner-1-768.webp
- central-banner-1-480.webp
- central-banner-2-1920.webp
- central-banner-2-1440.webp
- central-banner-2-768.webp
- central-banner-2-480.webp
- central-banner-3-1920.webp
- central-banner-3-1440.webp
- central-banner-3-768.webp
- central-banner-3-480.webp
Загрузите иллюстрации по FTP на ваш сайт. Доступ к FTP можно запросить у персонального менеджера. Иллюстрации нужно грузить в папку images. Также при редактировании баннерного поля с помощью кнопки "Изображение" можно добавить картинки.
В содержимое блока центрального баннерного поля необходимо вставить код слайдера и для различных разрешений экрана указать соответствующие картинки.

В содержимое блока центрального баннерного поля необходимо вставить код слайдера

HTML-код, отвечающий за добавление иллюстраций в слайдер

Пример кода для вставки одной картинки с файлами для 3-х разрешений

<div class="swiper slider-banner-center" id="slider-banner-center"> <div class="swiper-wrapper"> <div class="swiper-slide slider-banner-center-slide"> <picture> <source alt="banner1" media="(min-width: 1441px)" srcset="/images/central-banner-1-1920.webp" /> <source alt="banner1" media="(min-width: 769px)" srcset="/images/central-banner-1-1440.webp" /> <source alt="banner1" media="(min-width: 481px)" srcset="/images/central-banner-1-768.webp" /> <source alt="banner1" media="(min-width: 215px)" srcset="/images/central-banner-1-480.webp" />
<img alt="banner1" decoding="async" fetchpriority="high" height="480" src="/pics/icon/icon-file-image.svg" width="1400" /> </picture> </div> </div> </div>

Пример кода для вставки трех разных картинок с файлами для 3-х разрешений

<div class="swiper slider-banner-center" id="slider-banner-center"> <div class="swiper-wrapper">

Важно! Если необходимо вставить ссылку на изображение, которая будет перенаправлять на какую-то из страниц сайта, то в "Источнике" после каждого кода вида <div class="swiper-slide slider-banner-center-slide"> необходимо добавить <a href="Ссылка на нужную страницу"> и в конце после </picture> нужно вставить </a>

Пример: