What is the proper way to load an image that doesn't have alternate text?

November 16, 2022 - 3 min read

The proper way to load images that don't have an alt attribute or alternate text is to load the image in the CSS code using the background-image property and using the url() function where the argument to the function is the image url itself.

The images that have alternate text are referred to as presentational images since these images don't impart any information to the user other than the visual appearance itself. Doing this will also instruct browsers, screen readers, etc. that the image is used for visual appearance only and is a better accessible way of loading presentational images.

TL;DR

<html>
  <!-- 
    - Using the `background-image` CSS property
    and the `url()` function as its value 
    to load presentational images.
    - add `width` and `height` to the 
    `div` tag to see the background image
  -->
  <style>
    .presentational-image {
      background-image: url("/01.jpeg");
      width: 90vw;
      height: 40vh;
    }
  </style>

  <body>
    <!-- Replacing `img` tag with a `div` tag to place the background image -->
    <div class="presentational-image" />
  </body>
</html>

For example, let's say we have an image that is used as a design asset in a webpage like this,

<html>
  <body>
    <img src="/01.jpeg" />
  </body>
</html>

The webpage looks like this,

Now we know that we are using the above image only for visual purposes or as a design asset, we don't have any other information to show to the user with the above image. These kinds of images are called presentational images. For these images, we can use the background-image CSS property and the use url() function as its value where the argument to the url() function should be the image url.

It can be done like this,

<html>
  <!-- 
    Using the `background-image` CSS property
    and the `url()` function as its value 
    to load presentational images.
  -->
  <style>
    .presentational-image {
      background-image: url("/01.jpeg");
    }
  </style>

  <body>
    <!-- Replacing `img` tag with a `div` tag to place the background image -->
    <div class="presentational-image" />
  </body>
</html>

Let's add some width and height to the div element to see the background image we set.

It can be done like this,

<html>
  <!-- 
    - Using the `background-image` CSS property
    and the `url()` function as its value 
    to load presentational images.
    - add `width` and `height` to the 
    `div` tag to see the background image
  -->
  <style>
    .presentational-image {
      background-image: url("/01.jpeg");
      width: 90vw;
      height: 40vh;
    }
  </style>

  <body>
    <!-- Replacing `img` tag with a `div` tag to place the background image -->
    <div class="presentational-image" />
  </body>
</html>

Now the webpage looks like this,

This is how we can load presentational images that don't have an alternate text in a proper and accessible way.

See the above code live in the codesandbox.

That's all 😃.