The concept behind this example is good—a small-screen device such as a mobile phone doesn't need a large masthead image to fill its space. This technique is also advantageous in terms of file size—a smaller image is smaller in "weight," and therefore better for mobile devices, which are likely to be on a slow network. The trouble with the example above is that the default rule outside the media query loads the large masthead image for all browsers, because it's not being told to do otherwise. Then, for narrower screens, the media query kicks in, and the smaller image is also loaded. This design works against what we hoped to achieve.

To solve this problem, use the "mobile first" technique, in which you do things the opposite way around—you make the default rule the mobile rule, and kick in the rule for wider browsers when the viewport goes over a certain width: