make a image not load in full resolution when on smaller display

Question

Hi I have a background on my site but it is a 8k image and that takes forever to load when I am on slow Wi-Fi. Also, if I am on my phone it does not have a 8k screen so that does not matter. So is there a method that it does not load the full resolution when I am on a smaller display?

Answer 1

For background images, store different resolutions for each screen size, and use css media queries to set the background url based on the screen width:

.element {
    background: url("...bg_large.jpg");
}

@media screen and (max-width: 768px) {
    .element {
        background: url("...bg_small.jpg");
    }
}