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 element).


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


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.


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).


Add a comment

Required fields are marked *.

Back to top