CSS спрайти, Об’єднання зображень у CSS спрайти

Якщо на сторінці сайту використовується кілька картинок, сервер витрачає на них свої ресурси, посилаючи http запит до кожної з них. Це призводить до навантаження на сервер та збільшення часу завантаження сторінки сайту. Щоб знизити кількість запитів і збільшити швидкість завантаження сторінки сайту, використовується техніка css-спрайтів, коли кілька маленьких картинок об'єднуються в одну велику.

Для чого ще потрібне використання css-спрайтів? Якщо Ви намагаєтеся максимально прискорити завантаження Вашого сайту, то, напевно, використовували сервіс від Google — PageSpeed ​​Insights. Під час перевірки даних сервіс сторінки Вашого сайту можна буде побачити повідомлення — «Об'єднайте зображення у CSS-спрайти». Так ось щоб це повідомлення зникло і Ви підвищили на пару балів значення PageSpeed ​​Score і необхідно опанувати техніку створення css-спрайтів.

Техніка об'єднання зображень у css-спрайт

Існує багато сервісів, призначених для об'єднання зображень у css-спрайти, не кажучи вже про те, що це можна робити і самому у Photoshop. Я спробував на практиці кілька сервісів, але найбільше сподобався ось цей. Він має всі необхідні налаштування і при цьому генерує необхідний CSS код.

Для початку робіт я підготував усі 6 іконок у PNG форматі (Малюнок 1).

спрайти

Далі виставляємо необхідні налаштування у сервісі spritegen.website-performance.org (рисунок 2):

  • Build Direction я вибираю Horizontal (у вихідному спрайт-зображенні всі 6 картинок будуть розташовані горизонтально);
  • Зміщення по горизонталі: 5 px (картинки буде зміщено один від одного у вихідному спрайт-зображенні на 5 пікселів);
  • Зсув по вертикалі: 5 px.

Інші налаштування залишаємо за замовчуванням. Але Ви, звичайно, можете самі поекспериментувати з рештою налаштувань.

Сервіс працює з упакованими у ZIP файлах. Тому всі 6 картинок я стискаю в ZIP і завантажую на цей сервіс. Далі натискаємо «Створити спрайт зображення та CSS».

На виході одержуємо спрайт зображення (рисунок 3).

На виході отримали 1 файл замість 6, як раніше. Перед тим як використовувати це спрайт-зображення, я рекомендую його стиснути за допомогою якогось сервісу, наприклад, ось цього.

Схожі статті:

Підписатися на розсилку

Підпишіться на мою розсилку, щоб отримувати останні новини та оновлення з інтернет-маркетингу.