Stop image from being downloaded when on a smartphone

Question

I'm developing a responsive website for a company where the full size website has a slideshow with images in the background (filling the screen completely with Backstretch). Since the images are pretty hefty in size (around 300k), I'm looking for a way to stop the images from being loaded when viewing the site on a smartphone.

I've applied display: none and visibility: hidden on the backstretch div with a media query. It hides the images, but it seems like they are still being downloaded. Is there a smart way to make the browser ignore them altogether?

Answer 1

If you're setting the image through CSS then there is a way.

If you set the div to display:none it will still download, however if you set the parent div to display none then it will not load until a media query fires to set

CSS

.parent {display:block;}
.background {background-image:url(myimage.png);}

@media only screen and (max-width:480px) {
.parent {display:none;}
}

HTML

<div class="parent">
   <div class="background"></div>
</div>

Hat tip to Tim Kadlec - http://timkadlec.com/2012/04/media-query-asset-downloading-results/