What is the proper way to load an image that doesn't have alternate text?
Tags: css
Published: 2022-12-12 05:32:04

---
  title: What is the proper way to load an image that doesn't have alternate text?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 11:02:04 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/proper-way-to-load-images-that-doesnt-have-alt-text
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_aac329a51e.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/proper-way-to-load-images-that-doesnt-have-alt-text)
  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
<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
<html>
  <body>
    <img src="/01.jpeg" />
  </body>
</html>
```

The webpage looks like this,

![a simple webpage with an image used for visual appearance](/uploads/Screenshot_2022_11_15_at_7_06_32_PM_0c137f4f06.png)

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
<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
<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,

![webpage without image tag and replaced with background-image css property and still shows the image](/uploads/Screenshot_2022_11_15_at_7_07_11_PM_59e6db879e.png)

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](https://codesandbox.io/s/proper-way-to-load-images-that-doesnt-have-alt-text-using-css-gd6j08?file=/index.html).

That's all 😃.