Рекламные ссылки:

Главная » WordPress » оптимизация » Создаем CSS спрайт для своего сайта

Создаем CSS спрайт для своего сайта

2 июня



 Как я уже обещал ранее, некоторые моменты ускорения сайтов я буду рассматривать более подробно. Сегодня хочу затронуть такую тему, как css спрайты. Если вы не знаете что это такое, то сейчас все быстренько объясню. Например, в оформлении вашего сайта используются фоны, иконки и т.д. Во время загрузки страницы происходят запросы к каждому такому файлу и чем больше изображений, тем больше запросов. Соответственно больше нагрузка на сервер и больше скорость загрузки страницы. CSS спрайт – это одно изображение, в которое объеденены все ваши картинки. Получается, при загрузке происходит всего один запрос и загрузка одного файла, а далее при помощи стилей css браузер понимает какой фрагмент спрайта в каком месте нужно отобразить.

css спрайт

Когда во время оптимизации я столкнулся с этим моментом, то пришлось его отложить на неопределенное время. Для меня этот пункт показался достаточно трудоемким. Так бы и не вернулся к нему в ближайшее время, если бы случайно не наткнулся на один сервис. Он настолько все упрощает, что создать спрайты сможет даже школьник.
Давайте непосредственно перейдем на сам сервис и посмотрим как все это делается. На главной странице нам нужно будет добавить ссылку “SpriteMe” к себе в закладки.

сервис создания спрайтов

Можно просто кликнуть правой кнопкой мышки на ссылке и сохранить ссылку. Сразу оговорюсь, что в хроме у меня скрипт не заработал и делал я все в Firefox. После этого заходим на свой сайт и запускаем из закладок ссылку “SpriteMe”. На моем сайте спрайты уже установлены, поэтому в качестве примера будем рассматривать блог Сергея Сосновского. После запуска скрипта мы увидим все изображения, которые можно будет добавить в наш спрайт. Порядок расположения картинок на спрайте можно менять простым перетаскиванием.

скрипт создания сайта

Нажимаем на кнопку “make sprite” и все, наш спрайт готов. Остается нажать на кнопку “export CSS”. На открывшейся странице мы видим ссылку на скачивание файла спрайта (1) и стили css, которые нам необходимо заменить (2). Скрин кликабелен.

готовый-css

Стили будут действительными только для данного спрайта. Если вы переделаете спрайт, то стили изменятся. А вот так вот будет выглядеть готовый спрайт.

готовый-спрайт

Приступаем к установке спрайта.
Сервис предлагает разместить готовый спрайт у себя. Я не советую вам доверять хранение таких важных файлов на чужом сервере. Мало ли, что будет в дальнейшем. Закачиваем полученное изображение к себе на хостинг в папку с изображениями своего шаблона и приступаем к редактированию вашего файла стилей (обычно style.css). Не забывайте всегда делать копии файлов, которые вы собираетесь изменять! Я все буду объяснять на примере файлов блога Сосновского, так что у вас будут скорее всего другие названия. Открываем файл css и ищем там строчку с идентификатором “search”. Откуда я взял название идентификатора отмечено на скрине 2.1. Пунктом 2.2 отмечен старый адрес размещения картинки, а 2.3 – это предлагает нам прописать сервис. Мы поступим иначе. В своих стилях меняем только название файла и дописываем строчку с позицией (2.4).

#search {
position: absolute;
top: 47px;
right: 8px;
width: 324px;
height: 35px;
background: url(i/search.gif) no-repeat;
}
#search {
position: absolute;
top: 47px;
right: 8px;
width: 324px;
height: 35px;
background: url(i/spriteme1.png) no-repeat;
background-position: -10px -10px;
}

Проделываем такие изменения по всем позициям, сохраняем файл и заливаем на хостинг. Поздравляю, вы только что использовали передовую технологию css спрайтов на своем сайте.

Дополнение от 3.06.2011

Вот вам простой пример:

иконка rss 2,48 КБ + иконка twitter 2,39 КБ = 4,87 КБ  – столько весят две иконки в сумме.

А вот вам css спрайт из этих иконок спрайт css весом всего 3,32 КБ. Разница, как видите, ощутима.

Можете скачать и сами проверить пример

Tweet

Не забывайте подписаться на RSS или просто введите свой адрес электронной почты, чтобы получать регулярные обновления на e-mail:

Еще записи из этой рубрики

Ответов 6 на “Создаем CSS спрайт для своего сайта”

  1. Андрей 02.06.2011 at 22:39 #

    Спасибо за сервис. Придется ставить на наш сайт. Там как раз много мелких картинок загружается.

  2. Борис 02.06.2011 at 22:53 #

    Пожалуйста. Поверьте, разницу почувствуете сразу.

  3. Евгений 03.06.2011 at 09:58 #

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

    Насколько в весе 5 картинок отличается от спрайта из одной?

    • Борис 03.06.2011 at 13:15 #

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

      • Евгений 03.06.2011 at 15:20 #

        В школе математику я учил, деление понимаю. Суть вопроса в другом, думаю стоит перефразировать…

        При той же тысяче загрузок страницы, какую долю нагрузки несут в себе 5 мелких картинок по отношению, скажем, к контенту страницы? В случае с WP, насколько я понимаю, это обработка 3-5 файлов php при каждой загрузке + виджеты и плагины.

        Картинки в данном случае не составят и процента использования ресурсов. Да и делать их в облом, по сути…

        • Борис 03.06.2011 at 16:22 #

          Одно создание спрайтов не сделает сайт супер быстрым. Это всего лишь один из этапов по ускорению загрузки и не самый важный между прочим. Но если есть возможность убрать лишние запросы к серверу, почему бы этого не сделать? А делается это все буквально за 15 минут.

Написать ответ

*