Does hiding images at breakpoints prevent them from loading in the browser?

General Discussion
1

I have been researching this for some time and still don’t have any really clear answer:

Let’s say I have an image in a column. (The image is not set to be a background image.) I click on the image bric and turn off visibility for mobile (SM & XS).

When the page is loaded on a mobile device, the image is not visible. But my question is: does the image still get loaded in the browser, but is not visible because it’s display is set to “none”?

What I’m of course getting at, is to save download/bandwidth by hiding elements in mobile views.

When I google this topic I get a lot of different answers. For example one person said that it makes a difference if you hide the image or if you hide the whole container that the image is in. Another person said that it depends on if the image is used as a background image or just a “regular” image.

Just wondering if any of our Bootstrap Cracks out there could give some insight into this :slight_smile:

2

No it’s still loaded, just hidden with CSS.

3

I know it’s not standard in Bootstrap, but could Interchange resolve this?

In Foundation this was standard and ensures that only the appropriate image is downloaded for any given situation. I found somebody who managed to enable this in Bootstrap.

4

I just came across this (fairly) simple solution: http://adaptive-images.com/

I will try it out and see how it works.
:metal:

5

Has any Blocs users implemented this solution? If not, please share what you would use.

6

I think this script was last updated around 9 years ago, there’ll be a more modern solution out there by now.

1 Like
7
8

Thanks Wolfgang, there’s some good solutions there!