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.