Любой из них ( ссылка или ссылка ) сгенерирует спрайт для вас и соответствующего CSS.
Как только вы закончите, используйте классы CSS дляих соответствующие области, такие как:
.image1Background {
background-image: url("thesprite.png"),
left: -80px;
top: 0px;
}
.image2Background {
background-image: url("thesprite.png"),
left: 0px;
top: 0px;
}
<body class="image1Background">
<div class="image2Background">
</div>
</body>
Спрайты обычно используются для множества маленьких значков, чтобы уменьшить количество запросов, необходимых для их загрузки клиенту.