How to make images not load on a mobile site?

[PaulV]

I know i can use display:none, but the page has a lot of pics. The mobile page has less content and few pics. To load quicker and waste less bandwith i want to pics not to load on a mobile phone.How can I do that?

[davej]

How will you detect it is a mobile device? The best I can think of at the moment is to have a user display option that can be saved in a cookie.

[moonstarsun]

FYI loading and displaying are not the same thing. When you set display:none; the image will still consume the same bandwith because it must be physically called in browser memory even though it may not appear. For proof of concept the response time between display:block is significantly quicker than creating the image.

 

Now to actually answer your question you can use one of a few options.

 

My personal favorite trick is simply using a background image

@media only screen and (max-device-width: 480px) {    div {        background-image: url('myImageUrl.png');        height: 200px;        width: 400px;    }}<div></div>

However it can be a bit difficult to control the image ideally depending on your markup and events.

 

 

Another way (slighly more dificult however much more dynamic) is to use a javascript event to create an image through the DOM. Sort of like creating a mobile display template.