I'm developing a responsive layout and would like to reduce the size of the images as per resolution.
I've used display: none but I've seen in inspetor de elementos that it's loading. Is the data of the two images being consumed? Which alternative to this problem?
In this link a user ran a test on Chrome, the Internet Explorer, Firefox and Opera and they treat it in different ways.
If the images are in a img tag, they will be downloaded by everyone. But if they are as background-image of an element only Firefox and Opera do not download. IE and Chrome just will not download if the image does not fit the rule defined in media-query .
As you can already see is loaded and everything that is loaded consumes data, there is no miracle.
Certainly there are techniques to avoid loading the two. The load can be selective in what will actually be used. This can be done with JavaScript or with CSS ( media queries ). You have ask about it here .
First thing you should understand is:
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.
Looking at the situation, I realized that the answer I added above is not true, that is, 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 this on the NetWork tab, I also put an image to illustrate.
BecauseScriptcandynamicallycheckanelementofDOM,thebrowserdoesnotoptimizeelementsortheircontents.
Source: Does "display: none" prevent an image from loading?