<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
Even today (oct 2017), the most common browser Chrome will download all 'img' element sources, even if they're hidden. It won't download hidden background images.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With