Does 'display:none' prevent an image from loading?

In this tutorial, we will learn about the CSS display property with examples, and learn whether 'display:none' property prevents an image from loading or not? By Apurva Mathur Last updated : July 25, 2023

Answer: No.

The display:none property does not prevent an image from loading.

Working of CSS display:none property with image

Now as we know all the values of the display property, let us see how display : none works on the image?

Whenever we are applying to display : none to any content, that content is not visible to us as it is not visible to us which also states that it is not occupying any space also, but that doesn't mean that it won't be requested by the browser. All content written on the page is requested by the browser.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      display: none;
      }
    </style>
  </head>
  <body>
    <h2>display: none</h2>
    <div >
      <img src="https://image.shutterstock.com/image-photo/sunset-coast-lake-nature-landscape-260nw-1960131820.jpg">
      <img src="https://media.istockphoto.com/photos/renewable-energy-and-sustainable-development-picture-id1186330948?k=20&m=1186330948&s=612x612&w=0&h=5aNPCcQ8FcZraX44PEhb2mqcHkow2xMITJMHdh28xNg=">
    </div>
  </body>
</html>

The output of the above example is:

As you can see the image is not visible to us as display : none value is applied to the image.

Analysing (or, inspecting) whether 'display:none' prevents an image from loading

To see whether the image is getting downloaded on the browser, we will use the following steps:

Step 1: On the browser, right-click the mouse and go to inspect.

Step 2: After that go to network.

You'll see that, content is downloaded on the browser, it is just not visible to us as display : none is applied.

CSS display property with other values

As the name suggests, this property takes care of how things should get displayed on the screen after writing the code. It is applied to text/box/image/links to manage their location/position on the screen.

It has the following value:

1) display : inline

Inline means content arranged in a line, so when we want our content to be arranged in a line we use display:'inline'.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      span.inline {
      display: inline;
      border: dashed 2px blue;
      background-color: #b3d4fc;
      }
    </style>
  </head>
  <body>
    <h2>display: inline</h2>
    <div>
      Sometimes it pays to stay in bed on Monday, 
      <span class="inline">rather than spending the rest of the week debugging Monday's code</span>
    </div>
  </body>
</html>

Output:

<span> tag is the by default tag which is used with an inline value of display. In the above code, I've explained how inline values work. Simple styling is done to highlight the content on which display:inline value is applied.

2) display : block

Whenever you want to write your content in a container/box, you can use display:block value. This is always applied when you want your content in a form of a block. All the container tags are used with this value.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.block {
      display: block;
      border: dashed 2px blue;
      background-color: #b3d4fc;
      }
    </style>
  </head>
  <body>
    <h2> display: Block
    </h2>
    <div>
      Sometimes it pays to stay in bed on 
      <p class="block">Monday</p>
      rather than spending the rest of the week debugging Monday's code
    </div>
  </body>
</html>

Output:

As you can see, display:block is applied to only one text i.e. Monday and it appears as a whole block of content in another line.

3) display : none

This value of display removes the content on which it is applied.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.block {
      display: none;
      border: dashed 2px blue;
      background-color: #b3d4fc;
      }
    </style>
  </head>
  <body>
    <h2>display: none</h2>
    <div >
      Sometimes it pays to stay in bed on 
      <p class="block">Monday</p>
      rather than spending the rest of the week debugging Monday's code
    </div>
  </body>
</html>

Output:

As you can see in the code, display:none is applied to the text "Monday" and as a result it is removed from the view.

4) display : inline-block

The main advantage we get of using this value is that we can use height and width on the content. While we cannot do this height and width are set up when display:inline value is used. By default, the content on which this value is applied is represented as inline.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.inlineblock {
      display: inline-block;
      border: dashed 2px blue;
      background-color: #b3d4fc;
      height: 30px;
      width: 80px;
      }
    </style>
  </head>
  <body>
    <h2>display: inline-block</h2>
    <div>
      Sometimes it pays to stay in bed on 
      <p class="inlineblock">Monday</p>
      rather than spending the rest of the week debugging Monday's code
    </div>
  </body>
</html>

Output:

As you can see in the output the content displayed is inline and also I've given some height and width to the content which we cannot give when only the 'inline' value is used.

CSS Examples »

How to use google fonts on your webpage?

How to place text blocks over an image using CSS?