Спрайт css корисна технологія чи потенційне джерело проблем

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

Чи справді часто обговорюване перевага спрайтів варто того? Чи всі дизайнери, які стрибають на ходу в різнокольоровий вагон спрайтів CSS уважно розглядають всі фактори? У даній статті ми торкнемося переваг і недоліків спрайтів CSS. фокусуючись на використанні "мега" спрайтів і тому, що в багатьох випадках спрайт можуть стати причиною втрати часу.

Браузери кешують все зображення

Одним з переваг, яке часто згадується апологетами методів спрайтів, є час завантаження зображень (в разі мега спрайтів - одного зображення). Вони аргументують це тим, що одиничне зображення GIF, яке містить всі картинки станів, займає значно менше місця ніж набір окремих еквівалентних зображень розділених на окремі файли. Це дійсно так. Одиничне зображення GIF має тільки одну таблицю кольорів, асоційовану з ним. У той час як кожне зображення в розділеному наборі володіє власною колірної таблицею, додає кілобайти. Таким же чином і одиничний спрайт JPEG або PNG буде економити дисковий простір в порівнянні з розділеним набором самостійних зображень. Але так чи істотний виграш?

За замовчуванням, браузер кешує всі зображення - чи є зображення частиною спрайту чи ні. Таким чином, безсумнівно, що трафік економиться при використанні технології спрайтів, але тільки при початковому завантаженні сторінки. Кешування поширюється на наступні сторінки. які використовують ті ж самі URL зображень.

Збільшується час витрачається на дизайн спрайтів

Окрема кнопка зазвичай буває елементом

, який має певну встановлену ширину. Якщо для кожної кнопки є свій окремий спрайт, то все просто: ширина і висота
буде такою ж, як ширина і висота пункту списку і посилання з вирівняним спрайтом відповідно до кожного станом. Позиція спрайту легко обчислюється на основі висоти і / або ширини кожної кнопки.

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



Приклад CSS коду, який використовується на Google для вирівнювання спрайтів.

Те, що спрайт сайту Amazon зберігають приблизно 30 запитів HTTP є правдою і виразно важливим поліпшенням продуктивності. Але коли виграш протиставляється вартості розробки і підтримки, а кешування і швидкості інтернет з'єднань починають братися до уваги, то рішення використовувати спрайт в мега форматі може виявитися не таким вже й вигідним.

Чи справді спрайт потребують підтримки?

Звичайно, декому може здатися, що спрайт не можуть стати причиною головного болю. У багатьох випадках, після створення та використання, спрайт рідко редагуються знову і не входять до кола питань супроводу сайту. Якщо ви відчуває, що підтримка спрайтів не входить в коло важливих завдань. то можете сміливо використовувати мега спрайт.

Чи не все треба робити фоном

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



Amazon розміщує зображення контенту як вбудовані, а декоративні - як фон.

Неправильне використання спрайтів впливає на доступність

Через акцентування уваги на використанні спрайтів CSS, деякі недосвідчені розробники починають помилково вважати, що всі розділені зображення треба розміщувати в якості фону для зменшення кількостей запитів HTTP, навіть зображення, які несуть важливу смислове навантаження для контенту. В результаті виходить менш доступний сайт, і можуть виникнути обмеження у використанні потенційних переваг атрибутів title і alt в HTML.

А запити HTTP?

Основним аргументом (і дуже хорошим) є те, що найбільш важливою частиною поліпшення продуктивності є мінімізація кількості запитів HTTP. Деякі иссследования показують, що 40-60% відвідувачів веб сайту приходять з порожнім кешем. Чи є такий факт достатнім аргументом, щоб використовувати мега спрайт у всіх випадках? Ймовірно, так. Особливо тоді, коли для вас висока важливість саме першого візиту користувача.



Адд-он YSlow для Firefox показує кількість зроблених запитів.

Однак, в той час як старі браузери дозволяли встановлювати тільки два одночасних з'єднання HTTP, Firefox починаючи з версії 3.0 і Internet Explorer 8 за замовчуванням дозволяють встановлювати 6 одночасних з'єднань HTTP. Це означає 6 одночасних з'єднань до сервера.

Так що, при використанні переваг спрайтів CSS для станів кнопок, в майбутньому при зростанні швидкостей з'єднань інтернет і появі нових версій браузерів, які матимуть поліпшення для підвищення продуктивності, вигода від використання мега спрайтів може стати майже непомітною.

Яка ситуація з генераторами спрайтів CSS?

Іншим аргументом на користь використання мега спрайтів є видима легкість зі створення за допомогою генераторів спрайтів. Детальний огляд і обговорення даних інструментів виходить за рамки статті. Але в загальних рисах можна сказати, що допомога, яку вони надають, досить обмежена. а супровід та підтримка спрайтів забирає багато часу і ресурсів, що протиставляється вигодам від їх використання.



Генератор спрайтів SpriteMe.

Деякі інструменти, такі як Project Fondue. пропонують опцію виведення CSS коду. Інструмент SpriteMe - інший генератор спрайтів з можливістю виведення коду CSS. SpriteMe конвертує існуючі фонові зображення веб сайту в один спрайт (який в статті називається мега спрайтом), і його можна завантажити і вставити на сторінку з потрібним кодом CSS. Однак дані інструменти допомагають створювати спрайт, але вони не дуже корисні при підтримці спрайтів. SpriteMe взагалі може виявитися марним при роботі з сайтами, на яких змінюється дизайн фонових картинок, об'єднаних в спрайт.

Генератор спрайтів Project Foundue.

Покращення виробляються безперервно, і в майбутньому з'являться нові інструменти. Але, ймовірно, покладаючись на вище наведені аргументи, розробники фокусують занадто багато сил заради незначного результату?

Фокусуватися треба на інших способах поліпшення продуктивності

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



Адд-он YSlow вказує багато інших областей для поліпшення продуктивності.

Якщо розробник приділить час розгляду всіх факторів, які впливають на продуктивність веб сайту, і вдумливо зважить всі "за" і "проти", то може виявитися, що варто відмовитися від надмірного використання спрайтів і сфокусуватися на областях, внесок в які принесе значно більші вигоди в продуктивності сайту.

висновок

Багато блогерів і розробників протягом кількох років вихваляли використання мега спрайтів і дана опція повинна всерйоз розглядатися при розробці проекту. Однак не всі мають можливість працювати в умовах, коли підтримка веб сайту проста і зрозуміла. Багато веб розробники працюють зі своїм кодом, інші - над проектами, створеними кимось ще. Потрібно пам'ятати, що мега спрайт можуть викликати більше проблем, ніж принести користі.



За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!




Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!



Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.



Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!