CSS Sprites — объединение изображений

Раскладка выбирается из трёх: компактная, в столбец или в строку. Компактная укладывает картинки плотнее всего, а столбец и строка удобны, когда координаты потом правят руками.

Классы называются по именам исходных файлов, поэтому порядок в вёрстке узнаваем: файл arrow-left.png даёт класс .arrow-left. Переименовывать картинки до склейки проще, чем править стили после.

Спрайт собирается в PNG или JPG. PNG сохраняет прозрачность и нужен для иконок поверх цветного фона; JPG уместен для фотографий и даёт файл легче, но края непрозрачных картинок он размывает.

Смысл склейки в том, что браузер забирает один файл вместо десятков. Современные протоколы качают файлы одновременно, поэтому выигрыш во времени уже не такой, как раньше. Зато набор иконок остаётся одним файлом, который проще подключить и обновить.