Prevent images from being downloaded to page on mobile site

Question

How can I make it so that within the mobile version of my site the images are not downloaded to from the web server as these are large files that are not needed and not being used and therefore severely impacting the use of the mobile version of the site. Having looking at previous threads of such nature I saw that hiding the parent of the image using code such as below can benefit.

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

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

The problem being I don't want to use background image CSS for SEO issues associated with them as I like to use Schema tagging etc ..so how can I prevent an IMG tag from being downloaded, as display:none; only hides the image rather than stopping it being downloaded.

Note: This is not for copyright protection issues e.g. preventing right click etc etc but for speed and ultimately size of the downloaded content to mobile.

Answer 1

This solution uses CSS to prevent background-images from loading and jQuery to prevent images from loading. I'm not familiar with any CSS solution that will prevent images from loading.

JS Fiddle: http://jsfiddle.net/CoryDanielson/rLKuE/6/

If you know the images height and width (or even ratio) ahead of time you could set the background-image for a bunch of fixed size DIVs. This might be applicable for icons and layout-type images. Look at the HTML/CSS below for an example of that.

Background Images

/* hidden by default */
aside {
    display: none;
}

/* Pictures load for 'big screen' users.. pcs/tablets? */
@media screen and (min-width: 750px) {
  aside {
      display: block;
  }

  .catpicDiv {
    height: 100px;
    width: 100px;
    display: inline-block;
    border: 1px solid red;
    background-image: url('http://img2.timeinc.net/health/images/slides/poodle-1-400x400.jpg');
    background-size: cover;
  }
}

and HTML

<aside>
    <div class="catpicDiv"></div>
    <div class="catpicDiv"></div>
    <div class="catpicDiv"></div>
</aside>

---

---

Image Elements are a different story...

I don't know of any purely CSS solution to prevent them from loading the images. So I'd solve it like this:

Define IMG tags as follows

<img src="" data-src="url-to-image.jpg" />

Then, somewhere in the head of the document you need similar javascript

---

1) Function to load all of the images

function loadAllTheImages() {
    $("img").each(function(){
        $(this).attr('src', $(this).attr('data-src'));
    });
}

2) Code to determine if the user is on mobile or a PC (slow vs fast connection) and then load the images. This code isn't bulletproof, there are much more accurate and reasonable tests than this.

$(window).load(function(){
    if ( $(window).width() > 750 ) {
        loadAllTheImages(); // !
    } else {
        $("body").append("<a id='mobileCheck' href='javascript: void(0);'>I GOTS 4G, LEMME HAVE EM!</a>");
    }
});

3) As well as maybe some code to activate a button to load the images anyways? Why not, I guess... ?

$(document).ready(function(){
    $('body').prepend("<h1>" + $(window).width().toString() + "</h1>");
    $('body').on('click', '#mobileCheck', function(){
        loadAllTheImages(); // !
        $("#mobileCheck").remove();
    });
});

---

Similar solution as here and what I hypothesized in the comments:

Delay image loading with jQuery