Not loading a image with display:none

Question

I don’t want load the image on a mobil device, only on desktop.
I write the follow code:
CSS

@media only screen and (max-width: 480px) {
div#line1 {display: none}
}

HTML

<div id="line1" style=" background-image:url(/background.jpg);">
<img src="/head.jpg" />
</div>

The image background.jpg is not loaded, but the image head.jpg
If i add

div#line1 img {display: none} // for < 480 px

the same. The Image head.jpg is loading on a small resolution screen.
How can I prevent load the head.jpg to save bandwidth?

PS: i tested on Chrome browser

Are you looking for a pure css solution, or is JavaScript acceptable? (If JavaScriptis acceptable, is jQuery?) — alexanderbird, Oct 24 '16 at 17:02
What is the problem? the image is getting displayed in mobile devices? Can you elaborate more? — Pranesh Ravi, Oct 24 '16 at 17:07
Css property "display: none" will not save bandwidth at all, just hide the content. The parent background should be as small as possible then you could use srcset with the head.jpg image and just deliver somthing more reasonable...see this article: https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/ — orangeh0g, Oct 24 '16 at 17:08
No the image is not dispalyed (what i want), but the browser load the image. I see it in the firebug network console. — Lovntola, Oct 24 '16 at 17:08
@orangeh0g, if I understand the OP correctly, that's exactly the point: the image is loaded anyway, so it doesn't save bandwidth. But the OP wants to save bandwidth, so he wants an alternative. Lovntola, did I understand you right? — alexanderbird, Oct 24 '16 at 17:12
Checkout this link. Might help:http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading — Aakash Thakur, Oct 24 '16 at 17:12
@orangeh0g: yes the idee with srcset is good to save bandwitdh (if i say low is a realy small image), But someone know a solution to save the additional network request too? — Lovntola, Oct 24 '16 at 17:15
@alexanderbird you are right. On low screen i want no network request to load that image. — Lovntola, Oct 24 '16 at 17:16
Okay sory for a additional question: I still think if i set for the low srcset a image that will be loaded on both version always. The image is in the cache and loaded only onetime. Who of you would implement such a solution? — Lovntola, Oct 24 '16 at 17:26

score 3 · Answer 1 · edited May 23 '17 at 12:30

You could look at setting the image source in css, and put that css inside a media query.

In the html, don't have any image sources, then your css will be something like this - set the source only for non-mobile devices:

@media (min-width: 480px) {
    div#line1 img { 
        content: url("/head.jpg");
    }
}

You may have to fiddle with it a bit to get it to work.

Also, you should really take a look at the linked question - there is a lot of discussion about the consequences of using this method - and a lot of cases when you shouldn't use it.

andreas · Answer 2 · 2016-10-24T17:20:41.247

1

If it is an option to modify your markup, you can just replace your <img /> tag by an equivalent <div> and set the background-image like you did with the #line1 element.

<div id="line1" style=" background-image:url(/background.jpg);">
  <div class="inner-image></div>
</div>

Or you use the <picture> element and set the apropriate source with your max-width condition:

<picture>
  <source srcset="/head.jpg" media="(max-width: 480px)">
  <img src="/dummy-image.jpg" />
</picture>

edited Oct 24 '16 at 17:20

answered Oct 24 '16 at 17:14

andreas

14,688
11
61
62

A inner-div was my first idea, but the image is marked with schema.org. And i will test but the inner tag look like the same problem. is the fallback. – Lovntola Oct 24 '16 at 17:35
yes you're right, `` is the fallback, it's only a workaround using a dummy image... – andreas Oct 24 '16 at 18:30

score 0 · Answer 3 · answered Oct 24 '16 at 17:25

All you need to do is do add a min-height with the height of your bg image. When you hide a child element, the parent's height (the div#bg in this case) is updated with the tallest element inside, so if there's no element, the height is 0 (zero)

@media only screen and (max-width: 480px) {
  img#head {display: none}
  div#bg {min-height: 150px;}
}

<div id="bg" style="background-image:url(http://placehold.it/350x150?text=bg); background-repeat:no-repeat;">
  <img id="head" src="http://placehold.it/350x150?text=head" />
</div>

Thanks, but this is what i want. The DIV and the image should be 0px high. After this DIV there comes other DIV to show a image on low screens. On http://www.usa-reisetipps.net/ you can see the header image what i mean. But thank for this tip. — Lovntola, Oct 24 '16 at 17:40

Not loading a image with display:none

3 Answers3

Linked