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

Answer 2

There is no native solution in CSS that would prevent images from loading even if you hide them or set display to none.

You have to use some JS to achieve that result. If you are familiar with JS that should not be an issue at all. There are several plugins ready to go to do what you want. You can also write your own JS because its not that difficult.

Here is my code that loads images based on the screen size:

DEMO AT CODE PEN

It works without any libraries like JQ but if you use one of those it will automatically switch to it (Tweak it to your specific needs).

JS

// use jQuery or pure JS
if (typeof jQuery !== 'undefined') {
  // jQuery way
  // alert("jquery");

  $(function() {
    $(window).on('load resize', function() {
      var products = $("[data-product-image]");
      products.each(function(key, value) {
        var bg = null;
        if (window.outerWidth < 500) return;
        if (window.outerWidth < 1000) bg = $(value).data("product-image-s");
        if (window.outerWidth >= 1000) bg = $(value).data("product-image");
        console.log($(window).outerWidth);
        $(value).css({
          'background-image': 'url(' + bg + ')',
          'background-position': 'center',
          'background-size': 'cover',
        });
      });
    });
  });
} else {
  // Pure JS way
  // alert("JS");

  (function() {
    window.addEventListener('load', wlImageLoader);
    window.addEventListener('resize', wlImageLoader);
    function wlImageLoader() {
      console.log('event! Trig trig');
      var all = document.getElementsByTagName("div");
      var products = [];
      for (i = 0; i < all.length; i++) {
        if (all[i].hasAttribute('data-product-image')) {
          products.push(all[i]);
        }
      }
      Array.prototype.forEach.call(products, function(value) {
        var bg = null;
        var curent = window.getComputedStyle(value).getPropertyValue('background-image');
        console.log(curent);
        if (window.outerWidth < 500 || curent != 'none') return;
        if (window.outerWidth < 1000 && curent == 'none') bg = value.getAttribute('data-product-image-s');
        if (window.outerWidth >= 1000 && curent == 'none') bg = value.getAttribute('data-product-image');
        // if (window.outerWidth >= 2000 && curent == null) bg = value.getAttribute('data-product-image-l');
        if(bg == null || curent != 'none') return;
        value.style.backgroundImage = "url(" + bg + ")";
        value.style.backgroundPosition = "center";
        value.style.backgroundSize = "cover";
        curent = window.getComputedStyle(value).getPropertyValue('background-image');
        console.log(curent);
      });
    }
  })();
}

HTML

<div data-product-image="img/something_normal.jpg" data-product-image-s="img/something_small.jpg" id="p3" class="product">

However if you are a time loading freak you probably prefer to write your code natively in JS as you often don't use most of the jQuery library. For fast internet connection this is not a problem but if you target mobile devices on country side that might make a difference.

Answer 3

I would suggest combining perhaps the @import and @media commands to only @import the stylesheet which contains images if the @media tag meets you criteria (say, over a certain resolution).

So by default you wouldn't import the stylesheet which applies the BG image, you'd only end up doing it if you had determined the site was 'non-mobile'..if that makes sense!

The W3c site has some decent examples of combining the rules:

http://www.w3.org/TR/css3-mediaqueries/#media0