Однією з ключових завдань CSS спрайтів є оптимізація графіки завантажується сторінки. Яке завдання цієї оптимізації і навіщо її необхідно виконувати? Ідея полягає в наступному: поки сторінка не оптимізована, графічні елементи являють собою окремі файли. Кількість подібних елементів перевищує 5 або 10 штук, отже, для того, щоб завантажити кожну картинку, браузер здійснює окремий запит.
Логічно припустити, що прискорити процес можна за рахунок об'єднання графічних елементів. Відображення частин налаштовується через CSS. Після цього браузер буде виконувати тільки один запит, щоб завантажити зображення. Завдяки цьому сторінка буде завантажуватися в рази швидше. Ось і весь принцип оптимізації.
Крім цього спрайт використовуються для того, щоб правильно сформувати ефект візуального зміни елемента в момент, коли користувач наводить на нього курсор. Відсутність цього можна помітити, коли відвідувач бачить миготливу кнопку: у кнопки є два стани - початкове і в момент наведення, між завантаженням цих станів при відсутності організації виникає занадто довга пауза, через що виникає ефект миготіння.
Отже, розглянемо основні приклади CSS спрайтів:
У нас є перелік іконок в одному файлі. Завдання: вивести деякі картинки в рандомних послідовності.
Картинка (css-sprite-01.png) нижче - спрайт.
Після застосування списку стилів іконки залишаються виведеними в довільному порядку.
Давайте більш детально розберемося з цим прикладом. Дозвіл первісної зображення-спрайту: 200 * 200 px. Головна картинка розділена на 4 шматки, кожен з яких має дозвіл 100 * 100 px. Нам необхідно створити в документі список з ідентифікатором css-sprite-ul. Пункти списку пронумеруємо як 001, 002, 003 і т.д.