Об’єднуємо зображення в css-спрайт, блог вебмастера
При перевірці цього блогу Google Page Speed видало зауваження, що потрібно об'єднати деякі дрібні зображення в CSS-спрайт. Вчора я дуже багато часу вбив на вивчення цієї теми. Багато з Вас, напевно, бачили в різних шаблонах одне велике зображення з купою маленьких іконок. Спрайтами користуються фейсбук, гугл і багато інших гіганти Інтернету.
Це одне велике зображення, де по порядку збудовані інші дрібні деталі шаблону. За допомогою CSS вони потім викликаються і вставляються в потрібне місце. Для чого таке робити? Напевно, для зменшення числа запитів і завантаження дрібних картинок шаблону. Адже простіше один раз завантажити спрайт і потім тільки виводити з нього задану частину, ніж купу дрібних іконок. В мережі я знайшов багато цікавого матеріалу по створенню CSS-спрайтів для меню сайту, для посилань. На жаль, жоден матеріал мені не відповів на питання, що робити. Тобто в поточному шаблоні Google Page Speed знаходить якусь групу картинок, яку пропонує об'єднати в CSS-спрайт. А як це зробити? Що і куди прописувати і замінювати? Про це ні слова.
Сьогодні я на прикладі цього блогу спробую розповісти детально як таке робиться.
Для початку подивимося, що мені пропонує Google Page Speed об'єднати в CSS-спрайт.
З усіх запропонованих зображень видно, що є якась папка шаблону з маленькими картинками для оформлення. Нерозумно було б в спрайт додавати картинки з теми і плагінів. Я навіть не уявляю як таке потім можна виводити. Тому для створення CSS-спрайту я вибрав окрему папку шаблону з дрібними картинками.
Для відпочинку потрібно поїхати в Крим Судак Бірюзова 83.
створення спрайту
Зберігаємо створений файл і оптимізуємо його в сервісі smushit.com Після оптимізації закачуємо його по фтп в потрібну папку.
Інтеграція спрайту в шаблон
Ми поступово підійшли до самого важкого. Тепер нам потрібно замість старого коду прописати новий, який буде використовувати CSS-спрайт.
Для початку я покажу, як у мене виводився раніше код в CSS цих дрібних картинок.
Код цієї картинки в спрайт:
У підсумку вийде:
Таким чином я заміняю всі картинки. Хочу зробити ще деякі важливі зауваження.
[Important] Картинка в спрайт повинна бути тільки no-repeat з чітко вказаним розташуванням і прописаними параметрами висоти, ширини. Лише в такому випадку у Вас не виникнуть проблеми. [/ Important]
Також можна почитати:
- Збільшуємо швидкість сайту з Google Page Speed
- Установка Google Page Speed
- Підключення API сервісу перекладу для плагіна Codestyling Localization
- Помилка в інструментах для веб-майстрів від Google
