What is the most efficient way to have background images of different sizes in a responsive design website?

Question

I am building a responsive website. This website needs a lot of background images (both vector and raster formats).

I want to optimize the website for loading speed but not decrease picture quality.

My understanding is that I should have different versions for the same picture so that for small window devices the user automatically downloads the correct smallest file size.

My question is: What is the best way to deal with this problem? Do I need to use media queries? how to use them such that different browsers actually don't download unnecessary data?

is that what you want? demo - http://jsfiddle.net/antcnf14/1/ — Anonymous, Sep 12 '14 at 13:39

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Well, another post here on SO discussed if an unused css image url(''); is downloaded by the browser even if no element matches the rule. And it's been tested and established that on all major browsers, the images won't be downloaded unless an element actually matches the selector.

Post: Are unused CSS images downloaded?

It means that, if you define media queries for your styles, only the images inside rules that match the specific viewport will be downloaded.

In the following example, if you're in a device which is 480px wide or less, don't worry because large.jpg won't be downloaded.

@media (max-width: 480px) {
    #myDiv {
        background-image: url('small.jpg');
    }
}

@media (min-width: 481px) {
    #myDiv {
        background-image: url('large.jpg');
    }
}

Just reminding that this is a behavior left up to the browsers, so they can change anytime they want.

What is the most efficient way to have background images of different sizes in a responsive design website?

1 Answers1