You should be testing this page on a desktop computer, so you can check resources and whatnot.
Resize your browser window to a width below 500px, so pretty small. Refresh the page and check the resources that were loaded. Hopefully, the only image downloaded will be "tiny.jpg" - the background for this page, which is a measly 2kb.
However, when your browser window is set to anything above 500px, you'll get 'big.png' instead - a whopping 4mb.
By putting large-screen CSS into a media query instead of having it as the default, you'll be able to prevent excess resources from being downloaded.