Об'єднуємо зображення в CSS-спрайт
Необхідність об'єднання декількох зображень в один CSS спрайт виникла у мене для внутрішньої оптимізації сайту. Об'єднання декількох зображень в один спрайт в плані оптимізації дуже навіть важливий хід, так як браузер користувача запросить тільки одну єдину картинку з вашого сервера, замість декількох. Замість десятків запитів на Ваш сервер, браузер відправить тільки один запит і отримає тільки одне зображення, яке збереже в кеші комп'ютера. Всі подальші зображення він буде витягувати з цього спрайту, вже не звертаючись до Вашого сервера. При використанні спрайту в плюсі залишаються обидві сторони:
- Користувач отримає більш швидке відкриття сторінки.
- Веб-майстер зменшить навантаження на свій сервер.
Створення CSS спрайту
- Скачайте собі на комп'ютер всі дрібні зображення, які використовуються в дизайні Вашого сайту.
- Виходячи з приблизних розмірів Ваших зображень, краще відразу налаштувати ширину і висоту робочої області. Для цього натисніть SpriteMap -> MapSize. Далі вкажіть ширину і довжину в пікселях.
- Перетягніть по одному всі зображення в робочу область. Перетягуючи кожне зображення обладнайте їх таким чином, щоб ні одне зображення не наскакувала на інше. І бажано мінімізувати втрати, тобто спробуйте облаштувати в межах мінімальної області, так як зайвий кілобайти нам ні до чого.
- Коли все зображення додані, натисніть кнопку Fit Documemts. Дана кнопка автоматично обріже всю невикористану зону, тому не бійтеся в другому пункті вказувати велику область.
- Після всього цього натисніть кнопку Download. У відповідь Ви отримаєте архів, в якому міститься CSS-спрайт в форматі PNG. Крім цього в архіві Ви знайдете CSS файл, в якому міститься вся важлива інформація: координати початку зображення, його ширина і довжина. Даний сервіс зі створення спрайту вже зробив свою функцію, але я рекомендую його не закривати.
- Отриманий спрайт, той який в форматі PNG, додайте собі на сайт за допомогою FTP-сервера або іншого менеджера завантаження. Так само збережіть для себе шлях даного файлу.
- Далі нам необхідно втрутитися в сам код дизайну Вашого сайту. Тут може бути два варіанти:
- Зображення в дизайн додається через CSS файл.
- Зображення в дизайн додається через HTML за допомогою тега
.
- У другому випадку прохання прочитати мою попередню запис про те, як додати зображення через CSS. Коли все зображення будуть додаватися в дизайн за допомогою CSS. можете перейти до наступного пункту.
- А наступний пункт я опишу далі.
Додавання в дизайн зображення з CSS спрайту
Для прикладу я візьму приклад з попереднього поста:
Даний блок CSS файлу визначає розташування логотипу все-того ж сайту. Тут він приведений в початковому варіанті, до використання спрайту. Як бачите, тут вказується зображення logo.png. Так само вказана ширина і довжина зображення. Нам необхідно даний блок трохи видозмінити до такої кондиції:
Ось таким чином відбувається об'єднання декількох зображень в один CSS спрайт. Єдине про що хотів би Вас попередити: використовуйте спрайт тільки для статичних зображень. Використання спрайтів для динамічних зображень трохи складніше, про це я напишу пізніше. А поки що майте на увазі, якщо поруч з місцем розташування зображення вказано no-repeat. то все нормально. А якщо ж зазначено repeat-x або repeat-y. не вмикайте їх в основний спрайт.
Натисніть, якщо я зумів Вам допомогу
Як скоротити (стиснути) CSS?
Як оптимізувати зображення?
Як додати картинку через CSS і зробити її посиланням?
Статичне стиснення .css і .js-файлів
Видалення рядка запитів в URL статичних ресурсів
Управління сертифікатами Windows
Як скопіювати текст з захищеного сайту