Currently, I am exploring options to dynamically load a background image based on the width of the browser window. This way, I can optimize bandwidth usage by only loading the image that will be displayed.
I am aware that using the HTML picture tag allows for achieving this desired outcome.
<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>
This code snippet illustrates how only the appropriate image is loaded based on the browser width, ensuring optimal efficiency. For instance, if the browser width exceeds 650px, the pink flowers image is loaded. If it falls between 465px and 650px, the white flowers image is loaded. Otherwise, the orange flowers image is displayed.
However, given my focus on setting a background image rather than an inline image, utilizing the <picture> tag may not be suitable as it is typically used for specific images within content.
For working with a background image, my approach involves defining the image through the CSS property background-image for the body element. For example:
body {
background-image: url("my-large-image.png");
}
At present, here's how I have implemented this:
@media (min-width: 1000px) {
body {
background-image: url("my-small-image.png");
}
}
@media (max-width: 999px) {
body {
background-image: url("my-large-image.png");
}
}
My inquiry pertains to whether both background images are loaded in the aforementioned scenario or only the one that matches the browser window size. Additionally, I seek guidance on refining the implementation to ensure that only the relevant background image is loaded.