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.
Tip
Images are considered as information carriers if some of the page content or functions were missing without them. These images include:
- Logos.
- Text images.
- Image links and buttons.
- Etc.
Warning
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.
