Stop image from being downloaded when on a smartphone

css, html, image, responsive-design, smartphone

Solution

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/

Problem

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?

Original source