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

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

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

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

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

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

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

1. Выберите необходимые картинки в наибольшем разрешении, например, 1920x1080 пикселей.
2. Создайте по 3 пропорционально уменьшенные копии для каждой из картинок в разрешении, это будут соответственно размеры:
   • 1440x800 пикселей — для большого размера
   • 768х426 пикселей — для среднего размера
   • 480х266 пикселей — для малого размера
3. Переведите (сконвертируйте) все иллюстрации в формат 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. Итак, у вас есть по 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-3-480.webp
5. Загрузите иллюстрации по FTP на ваш сайт.
6. В содержимое блока центрального баннерного поля необходимо вставить код слайдера и для различных разрешений экрана указать соответствующие картинки.

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"> <!-- Баннер 1 -->
<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 class="swiper-slide slider-banner-center-slide"> <!-- Баннер 2 -->
<picture class="lazy-load">
<source alt="banner2" media="(min-width: 1441px)" srcset="/images/central-banner-2-1920.webp" />
<source alt="banner2" media="(min-width: 769px)" srcset="/images/central-banner-2-1440.webp" />
<source alt="banner2" media="(min-width: 481px)" srcset="/images/central-banner-2-768.webp" />
<source alt="banner2" media="(min-width: 215px)" srcset="/images/central-banner-2-480.webp" />
<source data-src="/images/central-banner-2-480.webp" alt="banner2"/>
</picture>
</div>


<div class="swiper-slide slider-banner-center-slide"> <!-- Баннер 3 -->
<picture class="lazy-load">
<source alt="banner3" media="(min-width: 1441px)" srcset="/images/central-banner-3-1920.webp" />
<source alt="banner3" media="(min-width: 769px)" srcset="/images/central-banner-3-1440.webp" />
<source alt="banner3" media="(min-width: 481px)" srcset="/images/central-banner-3-768.webp" />
<source alt="banner3" media="(min-width: 215px)" srcset="/images/central-banner-3-480.webp" />
<source data-src="/images/central-banner-3-480.webp" alt="banner3"/>
</picture>
</div>
</div>
</div>