Website Performance
Faster Page Loads With Image Concatenation beschreibt wie man den Download von vielen kleinen Icons durch den Download eines grossen Bildes ersetzt, um einiges an Performance Gewinn zu erzielen.
Beispiel:
<ul id="sidebar"> <li><a href="index.html" title="Home"> <img src="images/trans.gif" class="icon icon-home" alt="Home"/>Home</a> </li> <li><a href="search.html" title="Search"> <img src="images/trans.gif" class="icon icon-search" alt="Search"/>Search</a> </li> <li><a href="bookmarks.html" title="Bookmarks"> <img src="images/trans.gif" class="icon icon-bookmarks" alt="Bookmarks"/>Bookmarks</a> </li> </ul>
Das css sähe dann so aus:
#sidebar img.icon{
background: url('/path/to/concatenated/image.gif') no-repeat;
height: 16px;
margin-right: 3px;
vertical-align: middle;
width: 16px;
}
#sidebar img.icon-home{
background-position: 0px 0px;
}
#sidebar img.icon-search{
background-position: -16px 0px;
}
#sidebar img.icon-bookmarks{
background-position: -32px 0px;
}
Nachteil dieser Methode:
Using this method can affect the printability of your page as background images assigned with CSS don’t show in print too well
