What browsers download hidden images

Question

<style type="text/css">
    .hidden-image-container {
        display: none;
    }
</style>
<div class="hidden-image-container">
   <img src="lulcats.png" />
</div>

I'm mainly interested in what mobile browsers make the optimization of not downloading an image that's in a hidden container.

This would allow me to signficantly reduce initial download time.

Related reference question about loading images across devices

I'm pretty sure most browsers would still download a "hidden" element since it is assumed the hidden element will be used at some point. The only thing I can think of to prevent the image from downloading right away is removing the image from your hidden-image-container div, then use div.innerHTML = img tag html, when you want the client to download the image. — ToddBFisher, Jan 23 '12 at 15:10
See also https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading — Pino, Jun 28 '17 at 09:22

user123444555621 · Accepted Answer · 2012-01-23T15:17:52.207

11

Someone has tested this before:

http://www.w3.org/2009/03/image-display-none/test.php

Edit:
Looks like the list does not contain many mobile browsers (yet).

edited Jan 23 '12 at 15:17

answered Jan 23 '12 at 15:10

user123444555621

148,182
27
114
126

6

Someone would have to decode that UA list into a sensible viewable list of browsers that do and don't. – Raynos Jan 23 '12 at 15:38
1

It has iPhone OS 2-5 and Android. That covers most mobile phones, no? – ThinkingStiff Jan 23 '12 at 22:01

jAndy · Answer 2 · 2012-01-23T12:22:59.423

I would never call it an optimization for a browser to not download a hidden image. That might have dozens of good reasons and should (and will) still get downloaded by a browser. I don't have some table of numbers or browsers but I'm pretty much sure all mobile browsers will also download such an image as soon as the interpreter spots it.

I'm afraid there is no silver bullet to conditionally load <img> tags with just html/css. Right now you'll need at least a little piece of ecmascript, but as always, I'm very sure the stackoverflow community will correct me if I'm wrong here.

The <img> node has no property like .preventLoad (which would indeed be quite useful). Maybe it's time for a whatwg proposal, I'll join and support it :-)

I agree that downloading the image is the "correct" behaviour. FWIW, images created by JS are always loaded, even if not added to the DOM tree(!): `document.createElement('img').src = '//example.com/example.png';` — user123444555621, Jan 23 '12 at 15:27

What browsers download hidden images

2 Answers2

Linked