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