Media Queries Min / Max width and image download

2
votes

I have a question to which I think I know the answer. I also did some research online but you never know which information is correct or not so I thought Id ask here for confirmation.

I serve various background image sizes at different screen resolutions using the following type of media queries (example):

@media all and (min-width: 999px) and (max-width: 1000px)

Does this mean that there are no http requests and downloads of the image if it is below the min and over the max width? Or will the browser download the image regardless of the media query rules?

1
cssmedia-queries
you should be able to test by opening up your console and going to the network tab and see if the file is being downloaded - dmullings
@dmullings can I also do this offline with browser preview? I will try it, thank you - Demorus

1 Answers

1
votes

This post is from may 2012 but I think it is pretty accurate. Link to media queries info

Appears that different browsers treat this question differently. This link also shows some ways to fix it and go around it. Hope it helps.