6.5. Don’t 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 element).

Note

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

Tip

Images are considered to carry information if some of the page content would be missing without them. These images include:

  • Logos.
  • Text images.
  • Image links and buttons.
  • Etc.

Warning

In particular, text should not be placed off-screen and replaced by a background images.

When images are not uploaded, information may be lost.

<a href="/" id="logo">[My logo text]</a>
#logo {
   display: block;
   width: 300px;
   height: 100px;
   text‐indent: ‐99999px;
   background: url('images/logo.png');
}

This technique should be replaced with pure HTML code (such as an <img > tag with the proper alt attribute).

Comments

Add a comment

Required fields are marked *.

Back to top