Марахтанов алексей

А ось сама картинка, з помощю якою це зроблено:

Причому картинка всього одна.

А навіщо нам комбінувати зображення?

Звичайно, можна домогтися подібного ефекту використовуючи дві окремі картинки. Але, використовуючи CSS спрайт ми:

  1. Зменшуємо кількість запитів браузера до веб-сервера. Практика показує, що від 5% до 38% часу завантаження сторінки йде на завантаження HTML, інші 62% -95% складають HTTP запити (завантаження скриптів, зображень і т.д.). кожен тег
    і фоновий малюнок складають окремий запит. Нескладно здогадатися, що зменшення кількості HTTP запитів є одним з основних способів оптимізації завантаження і ефективності роботи сайту.
  2. Одночасно з тим знижується навантаження на сервер, що важливо при високій відвідуваності сайту.
  3. Усуваємо затримку перед відображенням другий картинки, тому що браузеру вже не треба завантажувати друге зображення після наведення покажчиком миші на картинку - воно вже є.
  4. Зменшуємо загальний розмір фалів з графікою.
  5. Покладаємо працю по анімації на CSS-движок браузера, а не на JS-движок, тобто це буде працювати навіть з вимкненими скриптами.

недоліки

  1. Збільшується час витрачається на дизайн сайту, так як мега спрайт часто вимагають тривалих перевірок і вирівнювання зображень станів.
  2. Збільшується витрати на розробку.
  3. Можуть виникнути обмеження у використанні потенційних переваг атрибутів title і alt.

Приклади використання у верстці популярних сайтів.

1. CSS спрайт Twitter

Спрайт підключається до строчному елементу , який роблять блоковим (display: block), щоб задати ширину і висоту. Для кожного елемента через клас прописується властивість background c необхідними координатами (background-position). Спрайт зроблений сіткою у вигляді шахової дошки з осередками 16 * 16px залитими фоном.
Такий спрайт зручно підтримувати. тому легко вираховуються координати необхідної картинки, але можна використовувати тільки для блоків з фіксованими розмірами.

2. CSS спрайт Facebook

Марахтанов алексей

На Facebook спрайт поділяються на типи. На зображенні три різних спрайту. Спрайт підключається до рядковим тегам . У елементів задана висота і ширина. Для кожного елемента через клас прописується властивість background-image c необхідними координатами.
Cпрайти розділені за типами, це дозволяє завантажувати необхідні зображення швидше, але можна використовувати тільки для блоків з фіксованими розмірами

2. CSS спрайт Youtube

Марахтанов алексей

Спрайт завантажується як фон класу sprite. Коли виникає необхідність у виборі якогось елементу, відбувається вибір початкової позиції за допомогою CSS властивості background-position, а потім застосування висоти і ширини.

Виведемо логотип YouTube на екран: