Search code examples
cssmedia-queries

Media Queries Min / Max width and image download


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?


Solution

  • 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.