การใช้เทคนิก CSS Sprites เพิ่มเพิ่มความเร็วในการโหลดเว็บ

recipe-dessert-cake-icon, .recipe-pizza-icon, .recipe-wine-icon, .recipe-wrap-icon
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.recipe-dessert-cake-icon { background-position: -0px -0px; width: 128px; height: 128px; }
.recipe-pizza-icon { background-position: -128px -0px; width: 128px; height: 128px; }
.recipe-wine-icon { background-position: -0px -128px; width: 128px; height: 128px; }
.recipe-wrap-icon { background-position: -128px -128px; width: 128px; height: 128px; }

<div class="recipe-dessert-cake-icon"></div>
<div class="recipe-pizza-icon"></div>
<div class="recipe-wine-icon"></div>
<div class="recipe-wrap-icon"></div>