CSS-спрайты — это методика объединения нескольких изображений в одно большое. Реализуется с помощью CSS, управляя видимостью нужного фрагмента большого изображения через свойства background-image, background-position и background-repeat.

Преимущества:

Уменьшение количества HTTP-запросов. Вместо загрузки множества мелких изображений загружается одно большое.
Ускорение загрузки страницы. Меньше запросов к серверу, быстрее рендер.
Экономия трафика. Общий размер файла часто меньше, чем сумма отдельных изображений.

Реализация:

Создание спрайта: Объединение изображений в одно с помощью графических редакторов или специальных онлайн-инструментов/сборщиков (например, Webpack с плагином css-spritesmith-plugin).
CSS: Для элементов, использующих изображения из спрайта, применяются следующие стили:
```
css
```

В приведенном CSS-коде .icon задает общие свойства для всех элементов, использующих спрайт. Классы типа .icon-home и .icon-settings определяют конкретное положение нужного изображения внутри спрайта с помощью background-position.

Как на странице или сайте реализуются CSS-спрайты?