Media Query Image Download Test

Return to parent article on media queries

Test One: Image Tag

Simple image tag that will show up when page is greater than 500 pixels wide, but are hidden on smaller screens.

HTML Code

<div id="imgtest">
    <img src="test1.png" />
</div>

CSS Code

<style type="text/css">

@media all and (max-width: 500px) {
    #test1 {
        display:none;
    }
}
</style>

Result

iPhone doesn't display images, but images are still downloaded.

Test Two: Background Image Display None

Two divs are assigned background images. These divs are hidden when the page is smaller than 500 pixels.

HTML Code

<div id="test2"></div>

CSS Code

<style type="text/css">
#test2 {background-image:url('test2.png');width:200px;height:75px;}
@media all and (max-width: 500px) {
    #test2 {display:none;}
}
</style>

Result

iPhone doesn't display images, but images are still downloaded.

Test Three: Background Image, Parent Object Set to Display None

This should be no different than test #2, but I observed some strange behavior on the dConstruct site that makes me think this might work where #2 does not.

HTML Code

<div id="test3">
    <div></div>
</div>

CSS Code

<style type="text/css">
#test3 div {background-image:url('test3.png');width:200px;height:75px;}
@media all and (max-width: 500px) {
    #test3 {display:none;}
}
</style>

Result

Works! iPhone doesn't display image. Doesn't download image.

Test Four: Background Image with Cascade Override

In this test, we start with a css background image that is a desktop version of the image. Then we use a css media query to replace that background image with a mobile version of the image.

HTML Code

<div id="test4"></div>

CSS Code

<style type="text/css">
#test4 {background-image:url('test4-desktop.png');width:200px;height:75px;}
@media all and (max-width: 500px) {
    #test4 {background-image:url('test4-mobile.png');}
}
</style>

Result

iPhone doesn't display desktop image, but downloads both desktop and mobile images.

Test Five: Background Image Where Desktop Image Set with Min-Width

In this test, I'm trying to isolate the desktop image by using min-width declaration in addition to the max-width for the mobile image.

HTML Code

<div id="test5"></div>

CSS Code

<style type="text/css">
@media all and (min-width: 501px) {
    #test5 {background-image:url('test5-desktop.png');width:200px;height:75px;}
}
@media all and (max-width: 500px) {
    #test5 {background-image:url('test5-mobile.png');width:200px;height:75px;}
}
</style>

Results

Works! iPhone doesn't display desktop image. Doesn't download desktop image.