CSS-спрайт: що це, чому це корисно і як їх використовувати?

1. Ви чули про це, але ... Ви дійсно розумієте що це таке? Назва злегка вводить в оману, тому що спрайт,...
2. Відмінно! Отже, як же це зробити?
3. Звучить так, що у мене з'явилося багато додаткової роботи.
4. SpriteMe
5. Що не може бути спрайтом?

Ви чули про це, але ...

Наша взаимовыгодная связь https://banwar.org/

Ви дійсно розумієте що це таке? Назва злегка вводить в оману, тому що спрайт, в даному випадку, це не маленькі картинки, а одне велике зображення. Ви, звичайно ж, зустрічалися з CSS-трюком, в якому для перемикання стану кнопки використовувалося одне зображення, яке просто порушувався.

Думаю CSS-спрайт - це розширення цієї техніки. Різниця в тому, що замість двох або трьох зображень, скомбіновані в одне, ви можете використовувати скільки завгодно картинок в одній. Термін "спрайт" прийшов з комп'ютерної графіки та індустрії відеоігор. Ідея була в тому, що комп'ютер може створити зображення в пам'яті, а потім відображати тільки його частина, що набагато швидше ніж створювати кожен раз нове зображення. CSS-спрайт мають ту ж ідею: отримати картинку один раз, відображати для кожного випадку свою частину.

Навіщо комбінувати ці зображення? Хіба не швидше завантажувати маленькі?

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

Нижче представлена ​​цитата зі статті " Performance Research, Part 1 ":

У таблиці 1 для популярних сайтів показано, що час на завантаження html-розмітки варіюється між 5% і 38%. Решту часу (від 62% до 95%) йде на створення http-запитів для того щоб довантажити інші частини документа (наприклад зображення, скрипти та стильові файли). Проблема в тому, що браузери можуть одночасно качати тільки в два або чотири потоки, в залежності від версії http і самого браузера. Наш досвід показує, що скорочення числа http-запитів має найбільший вплив на скорочення часу відгуку і часто є найпростішим способом збільшити продуктивність.

Час завантаження популярних сайтів. Час на завантаження HTML час на завантаження інших компонентів Yahoo! 10% 90% Google 25% 75% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% CNN 15% 85%

Кожне зображення на сторінці, будь воно в тезі img або background-image у вашому CSS-файлі - це окремий http-запит на сервер.

Відмінно! Отже, як же це зробити?

Давайте почнемо з прикладу. У представленому CSS для кожного елемента використовується своє зображення:

#nav li a {background: none no-repeat left center} #nav li a.item1 {background-image: url ( 'image1.gif')} #nav li a: hover.item1 {background-image: url ( ' image1_over.gif ')} #nav li a.item2 {background-image: url (' image2.gif ')} #nav li a: hover.item2 {background-image: url (' image2_over.gif ')} .. .

результат

Використовуючи техніку CSS-спрайтів ми реально можемо полегшити наш приклад. Замість 10-ти різних картинок, ми можемо зробити одну велику, в якій є всі необхідні нам зображення. Тепер наш CSS буде виглядати так:

#nav li a {background-image: url ( 'image_nav.gif')} #nav li a.item1 {background-position: 0px 0px} #nav li a: hover.item1 {background-position: 0px -72px} # nav li a.item2 {background-position: 0px -143px;} #nav li a: hover.item2 {background-position: 0px -215px;} ...

результат

Таким чином ми зменшили кількість запитів на сервер на 9, і обсяг інформації, що завантажується майже на 8 Кбайт. Але це маленький приклад, уявіть що буде на реальному сайті.

Звучить так, що у мене з'явилося багато додаткової роботи.

Як одного разу сказав Чак Норріс: "Всі великі речі вимагають великої самовідданості". Я звичайно не впевнений йому чи належать ці слова, але це в будь-якому випадку хороший рада :) Але на щастя для вас, існує безліч веб-сервісів, які допомагають реалізувати спрайт без особливих зусиль. Я зупинюся на одному - це SpriteMe .

SpriteMe

SpriteMe - це закладка. Після того як ви розмістите її на панелі закладок, вирушайте на свій сайт, а потім натискайте на неї. Відкриється віконце в правій частині вашого сайту.

Зверху ви побачите список всіх фонових зображень поточної сторінки сайту. Нижче список зображень, які, ймовірно, неможливо використовувати як спрайт, а також причини. Якщо ви думаєте інакше, ви можете перетягнути посилання з одного списку в інший. Після того, як ви зібрали необхідні зображення у верхньому списку, вам залишається натиснути на кнопку "Make Sprite". Усе! Ваші картинки зібрані в одну і ви можете її відразу подивитися

Для поточної версії сайту це зображення може виглядати так:

І нарешті, SpriteMe також дозволяє експортувати CSS. Натисніть на відповідну кнопку (export CSS) і ви побачите необхідний код. наприклад:

.link2article {background-image: url (/Content/images/Theme/more.png); background-image: url (http://www.jaredhirsch.com/coolrunnings/public_images/6a02f43daf/spriteme1.png); background-position: -10px -156px; } .Articlefooter {background-image: url (/Content/images/Theme/comments_bg.png); background-image: url (http://www.jaredhirsch.com/coolrunnings/public_images/6a02f43daf/spriteme1.png); background-position: 490px -265px; }

Перекреслені рядки - це рядки з вашого CSS, а нижче запропоновані.

Що не може бути спрайтом?

Як спрайту не може бути повторюваний фон. Спрайт використовуються для простих блокових елементів. Наприклад іконки - головні кандидати на використання їх в спрайт.