Как настроить адаптивное подключение background-изображений в слайдере?

Question

[Oleg]

Есть сайт, где на первом экране имеется слайдер (owl-carousel), в котором располагаются широкоформатные слайды во всю ширину и всю высоту экрана (100vw x 100vh).
У каждого слайда имеется background-image с картинкой разрешением 1920х1080.
Url картинки для бекграунда слайда задан инлайново, чтобы можно было воткнуть в разметку php-переменную с путём до картинки на случай интеграции с движком.
PageSpeed Insights снижает балл на мобильном за использование картинки слишком большого размера, рекомендуя: "Настройте подходящий размер изображений".
Я в курсе про picture и srcset, но картинка задана бекграундом, а также в курсе про медиазапросы @media в CSS, но у меня то эти url'ы прописаны инлайново, а @media нельзя прописать инлайново для элемента ((
Как быть?
Ссыль на сайт metod-agency.ru

Comments

[Rustam Bainazarov]

<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg">

img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
   object-position: center center;
}

Простейший полифил object-fit:
https://github.com/bfred-it/object-fit-images

[ProjectSoft]

Oleg самое простейшее это на стороне сервера определяете платформу и отдавать url на нужное разрешение картинки. Это динамично именно если вы используете инлайн стили.

И ответ Рустам Байназаров очень даже правильный, как решение вашей проблемы.