Как создать CSS спрайты

Главная » Как создать CSS спрайты

Что такое CSS спрайты

Техника CSS спрайтов используется для объединения нескольких изображений в один файл, тем самым снижая время на запросы, их количество, а также общий размер.

Как проверить нужно ли мне создавать спрайты

Переходите на сервис Gtmetrix.com и вбиваете туда адрес своего сайта. После выполнения анализа, обратите внимание на следующую рекомендацию и на её показатель.

Combine images with CSS Sprites

Если степень рекомендации является критической или просто важной, она будет помечена цветом, отличным от зеленого с соответствующим показателем в процентах.

Как создать спрайт с помощью онлайн сервиса

Мы будем использовать очень удобный инструмент SpriteMe.

CSS спрайты, конечно, можно создавать и вручную. Но это довольно трудоемкий процесс, и даже опытные веб-мастера предпочитают пользоваться готовыми инструментами и сервисами.

С помощью SpriteMe практически любой новичок легко справится с этой задачей.

Установка и запуск spriteme

Установка производится перетаскиванием ссылки в панель закладок.

Затем, открываете вашу страницу и нажимаете на эту сохраненную закладку. Покажется окошко SpriteMe как на скриншоте.

Скрипт попытается автоматически определить подходящие изображения для спрайтов. Вы можете вручную добавить свои.

В большинстве случае, вам просто нужно будет нажать:

Make All

Export CSS

После чего, откроется другое окно с созданными правилами CSS.

Экспорт CSS в SpriteMe

Сохраните картинку на свой компьютер, потому что она не будет храниться долго на их сервисе. Закачайте её в Медиафайлы вашего WordPress сайта. Нажмите Изменить и скопируйте ссылку.

Экспортированные правила CSS также скопируйте в блокнот, произведите поиск и замените внешний адрес файла изображения на ваш файл.

Подключите измененные стили в Style.css, или в область для добавления пользовательских стилей.

Проверьте работу визуально на сайте, а также проведите повторный анализ в Gtmetrix. Вы заметите улучшение показателя, если эта рекомендация была актуальна для вашего сайта.

Не игнорируйте детали. Рост скорости загрузки сайта измеряется как раз суммой таких мелочей.

Оставить комментарий

avatar
  Подписаться  
Уведомление о
Пролистать наверх