An image with display:None is loaded? Consume data?

Question

An image with display:None is loaded? Consume data?

Asked 6 years, 10 months ago

Viewed 556 times

12

I’m developing a layout responsive and would like to decrease the size of the images according to the resolution.

I used the display: none but saw in the inspetor de elementos that it is being loaded. Is the data of the two images being consumed? What alternative to this problem?

Working with media query you only upload what you need for the chosen resolution

– Otto

2017/08/21 at 12:47
All right, man, what other method do you use for this? with display: none.. it is loaded in all media.

– wDrik

2017/08/21 at 13:17
instead of loading via html puts them in css and uses media query

– Otto

2017/08/21 at 13:27
Got it, with the background. Thanks

– wDrik

2017/08/21 at 13:28

3 answers

10

In this link a user did a test on Chrome, Internet Explorer, Firefox and Opera and they handle it in different ways.

If images are in a tag img they will be downloaded by everyone. But if they are as background-image only Firefox and Opera do not download. IE and Chrome will not download only if the image does not fit the rule set in media-query.

Browser other questions tagged javascript html css html5

You are not signed in. Login or sign up in order to post.

by Maniero • **444,682** points · Answer 1 · 2017-08-21T12:56:35+00:00

As you can already verify is loaded and everything that is loaded consumes data, it has no miracle.

Surely there are techniques to avoid the load of both. The load can be selective in what will actually be used. This can be done javascript or with CSS (media queries). Has question about this here.

by Marconi • **17,287** points · Answer 2 · 2017-08-21T13:02:12+00:00

First thing you should understand is :

When to use the background CSS tag or property?

If your image has no semantic value use the property background-image + display:none in a div, this will prevent your image from being loaded.

Editing

Analyzing the situation I realized that the answer I added above is not true, ie at least in the case of Google Crome this image is downloaded.

See for yourself:

div#image { 
   background-image: url("https://i.pinimg.com/736x/6b/b2/49/6bb249802cf0c124fde0ccbcea699340--funny-stuff-quotes.jpg");
   width:500px;
   height:500px;
   display:none;
}

<div id='image'>
</div>

You can see it in the tab NetWork, I also put an image to illustrate.

Why is it necessary for the image to load?

Due to the possibility of a Script dynamically verify an element of the DOM, the browser does not optimize elements or their contents.

_{Source: Does "display:None" Prevent an image from loading?}