Что такое CSS спрайты?

CSS спрайты - это специальная техника, когда мелкие картинки объединяются в один файл и выводятся не с помощью тега <img>, а с помощью CSS. Допустим, у нас есть большой файл с картинками icons.png. Тогда пример использования выглядел бы так:

.icon {
       background: url('icons.png');
       height: 32px;
       width: 32px;
       display: inline-block;
}
.icon_open {
       background-position: -64px 0px;
}

Допустим, что размер иконок 32х32 и нужная нам иконка идет третей в первом ряду (в спрайте).

<span class="icon icon_open"></span> Open