Are my images being loaded on Mobile?

Question

On my webpage, I have a Carousel using following CSS & HTML code.

Will my mobile browser still load these images and use up bandwidth even though I have the background set to display:none when it's below 600px width?

CSS:

.item1 {
    background-image: url('/wp-content/uploads/2016/11/1.jpg')
}
.item2 {
    background-image: url('/wp-content/uploads/2016/10/6.jpg')
}
.item3 {
    background-image: url('/wp-content/uploads/2016/10/5.jpg')
}
.item4 {
    background-image: url('/wp-content/uploads/2016/10/3.jpg')
}
.item5 {
    background-image: url('/wp-content/uploads/2016/10/2.jpg')
}
.item6 {
    background-image: url('/wp-content/uploads/2016/10/1.jpg')
}
@media all and (max-width: 600px) {
    .item, .item1, .item2, .item3, .item4, .item5, .item6, #myCarousel4, #myCarousel 4 div {
        display: none
    }
}

HTML:

<div class="carousel slide" id="myCarousel4">
<div class="carousel-inner">
<div class="item item1 active">
 <div class="container">
  <div class="carousel-caption"></div>
 </div>
</div>
<div class="item item2">
 <img class="img-responsive">
 <div class="container">
  <div class="carousel-caption"></div>
 </div>
</div>
<div class="item item3">
 <img class="img-responsive">
 <div class="container">
  <div class="carousel-caption"></div>
 </div>
</div>
<div class="item item4">
 <img class="img-responsive">
 <div class="container">
  <div class="carousel-caption"></div>
 </div>
</div>
<div class="item item5">
 <img class="img-responsive">
 <div class="container">
  <div class="carousel-caption"></div>
 </div>
</div>
<div class="item item6">
 <img class="img-responsive">
 <div class="container">
  <div class="carousel-caption"></div>
 </div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel4">
 <i class="glyphicon glyphicon-chevron-left"></i>
</a> 
<a class="right carousel-control" data-slide="next" href="#myCarousel4">
 <i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>

Demo: https://jsfiddle.net/xetvLk6w/

DomeTune · Accepted Answer · 2017-01-11T09:20:56.607

2

Yes. As long as your images are in the directory "/wp-content/uploads/2016/10/1.jpg".

You publish your website on a server in the folder "root", there you have the "index.html" and and the folder structur: "root/wp-content/uploads/...".

So where ever you open your Website, it will look for the directory and will find and load your images.

EDIT When your display width will be under 600px the images will not be displayed. For a smarter css you can just use

@media (max-width: 600px) {
    .item { 
        display: none;
    }
}

This will hide every div with the class "item", which all divs are containing in the example.

edited Jan 11 '17 at 09:20

answered Jan 11 '17 at 09:17

DomeTune

1,401
10
21

Cool! So if I'm on my mobile phone, it won't load the images as I've set it to display:none or will it still load them anyway? – michaelmcgurk Jan 11 '17 at 09:18
1

@michaelmcgurk Your media query does not seem to be firing, have you added this meta tag to your header? `` – Neelam Khan Jan 11 '17 at 09:21
i dont even made an example :-? I dont know what you want to ask me :-( @NeelamKhan – DomeTune Jan 11 '17 at 09:23
You have answered the question with your code example @DominikNoll the styles inside the media query in the original question were wrong and that is what I was trying to say. – Neelam Khan Jan 11 '17 at 09:28

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

A similar question has been answered here: Does "display:none" prevent an image from loading?

and there it's said

Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful.

It really depends on your browser. Some will load the images and some won't, as is stated in this answer to the above post: https://stackoverflow.com/a/22970996/2700042

these are the essential findings discussed in the answer linked above

So after digging further I found this, which explains how each browser handles loading img assets based on css display: none;

Excerpt from the blog post:

Chrome and Safari (WebKit): WebKit downloads the file every time except when a background is applied through a non-matching media-query.

Firefox: Firefox won't download the image called with background image if the styles are hidden but they will still download assets from img tags.

Opera: Like Firefox does, Opera won't load useless background-images.

Internet Explorer: IE, like WebKit will download background-images even if they have display: none;

Something odd appears with IE6 : Elements with a background-image and display: none set inline won't be downloaded... But they will be if those styles aren't applied inline.

score 1 · Answer 3 · answered Jan 11 '17 at 09:22

1

display: none will not help you.

For readability, I'd place the "default" (mobile-first) css on top as:

.item1 {
  background-image: none;
}

...

/*note min and em */
@media all and (min-width: 40em) {
  background-image: url('bla.jpg');
}

answered Jan 11 '17 at 09:22

Teson

6,644
8
46
69

I did wonder how much of a difference this would make - so it makes more sense to go mobile first when doing this? – michaelmcgurk Jan 11 '17 at 09:25
Mobile first one of the basic principles in RWD. – Teson Jan 11 '17 at 09:30
"Mobile first one of the basic principles in RWD" - Arguably ;-) – michaelmcgurk Jan 11 '17 at 09:41
1

@michaelmcgurk , I can't parse the amount of irony in your comment but that's ok. :) However both bootstrap, foundation and pureio (my favourite) uses min-width in ascending order. – Teson Jan 11 '17 at 10:27

Are my images being loaded on Mobile?

3 Answers3