Browser Inspect Performance Check
BACKGROUND-IMAGE This strategy is about working with background images. To demonstrate the concept the image will be placed in the body tag. You can accomplish the same result placing the images in the background of a header tag. In fact, the header may be a better choice. Which approach really depends on the specific needs of your layout.
This is a performance approach as the query will only load the image that meets the query test. This does assume a device with a fixed viewport is being used. This is also an art direction approach as we can load different images to meet different design layouts.
Speaking of performance, you should begin to use the "Inspect" developer option/tool available in most browsers. Using the tool will help you better understand how your pages are loading assets and making requests on the server. Remember, latency is enemy number one in your fight to create the best user experience possible.