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