В настоящее время я ищу, чтобы загрузить другое фоновое изображение в зависимости от ширины браузера.Чтобы уменьшить пропускную способность, я бы хотел, чтобы загружалось только изображение, которое я собираюсь показать.
Я знаю, что можно получить этот результат, используя HTML с тегом picture.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
В этом примере будет загружено только соответствующее изображение.IE: если браузер шире 650px, будут загружены розовые цветы.Если размер браузера составляет от 465 до 650 пикселей, будут загружены белые цветы.В противном случае оранжевые цветы будут загружены.
Но использование тега <picture>
не кажется подходящим решением, поскольку его не следует использовать для покрытия всего экрана.
Поскольку яработая с фоновым изображением, я хотел бы установить свое изображение со свойством CSS background-image
на моем теле.IE:
body {
background-image: url("my-large-image.png");
}
Вот что у меня сейчас есть:
@media (min-width: 1000px) {
body {
background-image: url("my-small-image.png");
}
}
@media (max-width: 999px) {
body {
background-image: url("my-large-image.png");
}
}
Мой вопрос: в моем последнем примере загружены оба изображения или только изображение соответствующего размера?Если загружены оба изображения, как бы вы изменили его, чтобы загружалось только соответствующее фоновое изображение?