Do not use CSS to display images that carry information

CSS should not be used to display images that carry information.

In other words, images with information should be included in the HTML code (i.e. via the <img /> tag or <svg> tag).

Note

Image sprites (images loaded in the background via CSS) are not appropriate for images that carry information.

Images are considered as information carriers if some of the page content or functions were missing without them. These images include:

In particular, we strongly advise against the technique of placing text off-screen and replacing it with a background image.

When images are not uploaded, the information may be lost.

<a href="/" id="logo">[My logo text]</a>

#logo {
   display: block;
   width: 300px;
   height: 100px;
   text‐indent: ‐99999rem;
   background: url('images/logo.png');
}

Pure HTML should be used instead.