Avoid loading images in mobiles

Question

I want to avoid loading an image on the website when the screen width is lesser than 1146px. I've tried to add the below CSS rule:

@media only screen and (max-width: 1146px) {
#img_cabecera2 {display: none;}
}

And of course, the image is not shown, but it is loaded. I want to load an image only if the screen width s more than 1146px.How could achieve it?

I don't mind if the solution uses CSS, Javascript, jQuery or PHP code.

Edit:

I've achieved it in this way:

template.html:

 <div id="img_cabecera2">
 <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="">
 </div>

script.js:

$(function(){

/* Set img_cabecera2 size */

    function set_src() {
      var window_width = $(window).width();
      if (window_width < 1147) {
          $("#img_cabecera2").css({"display":"none"});    
      } else {
          $("#img_cabecera2 img").attr('width', 300).attr('src', "/public/img/carrete.png").attr('alt', "logo").attr('height','auto');
          $("#img_cabecera2").css({"top":"15px","left": "44%","display":"block"});
      }
    }


       set_src();


    $(window).resize(function() {
        set_src();
    });

/* ************************* */

...

Then it cannot be obtained without javascript. Pure css cannot remove anything but hide it. — Tom Chung, Nov 29 '13 at 10:34
@TomChung - And how to avoid it using Javascript and JQuery? — Manolo, Nov 29 '13 at 10:38
@rynhe good suggestion but the selector should be $("#img_cabecera2") — Tom Chung, Nov 29 '13 at 10:42
@rynhe - The image is loaded anyway... I want to prevent loading the image. — Manolo, Nov 29 '13 at 10:53
@the remove suggestions, that doesnt work. The browser will see the image and proceed to download the image. And then doesnt display it because you removed the ``, which is kinda a waste :) — Martijn, Nov 29 '13 at 13:48

Martijn · Answer 1 · 2013-11-29T15:01:35.450

I use this:

<!-- This image is a blank, 2*2 image -->
<img src="/images/transparant.png"
     data-bigsrc="/images/big.jpg" 
     data-smallsrc="/images/small.jpg" />

With this as javascript

function getProperImageSource(){
    var attr2use = $('body').outerWidth()>480 ? 'data-bigsrc' : 'data-smallsrc';
    $('img[data-smallsrc], img[data-bigsrc]').each(function(i){ 
        this.src = this.getAttribute(attr2use);
    });
}
$(document).ready({
    getProperImageSource(); // load images on init
    $(window).on('resize', function(){
        getProperImageSource();// again on resize
    });
});

Might be handy to know: An image on display: none still loads, you just don't see it.
Also, removing images with (javascript-)functions can be slow aswell, because it can still trigger the downloading of the image, but because you removed the <img/> tag It wont be displayed, kinda a waste of time and resource :)

score 0 · Accepted Answer · edited May 23 '17 at 10:31

0

Add the css display:none; to the image and add this jQuery code:

function set_src() {
  var window_width = $(window).width();
  if (window_width < 1147) {
      $("#img_cabecera2").hide();
  } else {
      $("#img_cabecera2").attr('src', BIG).show(); // Change to your image link  
  }
}

$(document).ready(function(){
   set_src();

   $(window).resize(function() {
     set_src();
   });
});

To avoid the image to be preloaded unnecessarily, while not just having an default empty src="" (omiting an image source is invalid, as I understand it), I found this post where one of the best solutions was to use this only 26 bytes big default source:

src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D"

edited May 23 '17 at 10:31

Community

1
1

answered Nov 29 '13 at 11:55

display-name-is-missing

4,424
5
28
41

I dont really like this code because of the following: This only works for 1 image. If you want this for multiple., you would have to copy/paste. Also, the javascript should not contain the location to the new image, thats not what JS is for. But must imporantly, that base64 code is just weird to use (imo), no one is going to remember that from the top of their head. – Martijn Nov 29 '13 at 14:58
@Martijn The base64 code being wierd I agree with, but if you don't want that perhaps strange code you could just replace it with some 1x1 image or similar of your choice. I chose the base64 code because that is about as small as an image can get, so it would have practically zero impact on page load time. – display-name-is-missing Nov 29 '13 at 17:48
@Martijn You are totally right about the "1 image"-problem. I didn't thought of that since the OP asked about one question. You're answer is better suited in that situation, although you could apply that `each` loop easily in my function. – display-name-is-missing Nov 29 '13 at 18:22

score 0 · Answer 3 · answered Nov 29 '13 at 12:49

0

As has been mentioned, at the moment there is no way of doing this in pure CSS. i have made use of the picturefill script in the past and have found it quite reliable.

answered Nov 29 '13 at 12:49

Ian Devlin

18,534
6
55
73

Actually, you could do it with background images and mediaqueries. But not with pure images, indeed. – Martijn Nov 29 '13 at 15:03

Avoid loading images in mobiles

3 Answers3