Maybe! But there are other options
I read an interesting article the other day on media queries:
http://zomigi.com/blog/essential-consid ... a-queries/ and part of the discussion covered images downloaded (or not) inside of media queries.
The whole article is interesting, and I picked up a some other useful ideas. Anyway, a link within that page goes to a website that shows test cases for methods to stop images from being downloaded on mobile devices. The full article is here:
http://timkadlec.com/2012/04/media-quer ... splay_none
The concluding part of the post recommends 2 methods for avoiding image downloads on mobile;
1 - Set an image as a background on a div, and then instead of hiding that div, you hide the div's parent element
Code: Select all
<div id="test3">
<div></div>
</div>
#test3 div {
background-image:url('images/test3.png');
width:200px;
height:75px;
}
@media all and (max-width: 600px) {
#test3 {
display:none;
}
}
2 - Use stacked media queries to serve all images (set as backgrounds on divs) to different sized screens
Code: Select all
<div id="test5"></div>
@media all and (min-width: 601px) {
#test5 {
background-image:url('images/test5-desktop.png');
width:200px;
height:75px;
}
}
@media all and (max-width: 600px) {
#test5 {
background-image:url('images/test5-mobile.png');
width:200px;
height:75px;
}
}
Caveat on method 2
...if you use this method, you’ll need to consider alternate options for Internet Explorer 8 and under. Those versions of the browser don’t support media queries, so no image will be applied. Of course, this is simple enough to fix with conditional comments and an IE specific stylesheet.
I don't know the mobile plans out there but i don't use the homepage much if at all only in the beginning did go via the homepage but my data plan include 100gb so did not think about that issue...