CSS спрайты (CSS Sprites). Ускоряем загрузку страниц сайта!

Здравствуйте! Сегодня хочу рассказать Вам, о хорошем методе Sprites CSS, который помог в оптимизации изображений на моем блоге, также в уменьшении времени загрузки страниц блога, за счет сокращения числа запросов к серверу. Реализацию технологии покажу на собственном примере.

Техника таких «Спрайтов» заключается в следующем, мы создаем комбинированное изображение, из изображений, которые должны находиться на нашем сайте. После чего с помощью свойств:

  • background-image — для определения нашего спрайта,
  • background-position — для определения конкретного изображения на нашем спрайте,
  • атрибутов («width» и «height», для определения размеров изображения высоты и ширины),
  • background-repeat — повторять («х» — по горизонтали, «y» — по вертикали «no-repeat» — не повторять изображение совсем).

Так как я обещал показать все на реальном примере, привожу часть моего спрайта, для того, чтоб Вы понимали как все это выглядит (sprite-y.png, размер — 27 КБ).

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

Создать CSS спрайт, можно с помощью генератора спрайтов — Генератор CSS спрайтов (Я перепробовал множество разных генераторов, но остановился именно на этом, который собственно говоря советую и вам)

Как подключать CSS спрайты

Для внедрения спрайта, нам понадобиться такие свойства, как:

Как выглядит Sprite CSS

  • background-image: url («sprite-y.png») — определяем наш спрайт;
  • background-position: −10px 20px (определяем позицию спрайта, генератор спрайтов даст Вам к каждому элементу свою позицию в файле «sprite-y.png»);
  • background-repeat: no-repeat (задаем способ повторения, в данной случае стоит «no-repeat», значит без повторения).

Также можно указать параметры width и height. Пример: width: 16px; и height: 16px;

Более детальней, покажу на примере блока справа, в СайдБаре — «Подпишись на RSS!».

Если Вы, внимательно посмотрите, возле каждой ссылочки, слева картинка, а ниже способ реализации:

p.rssfeed, p.rssfeed_google, p.rssfeed_yandex {
    background-image: url('pix/sprite-y.png');
    background-position: 6px -1746px;
    background-repeat: no-repeat;
}

На данном примере, в этом блоке стоит три одинаковые картинки, если делать разными, код получиться вот таким (без спрайта):

.rssfeed {
    background-image: url('pix/rss.gif');
    background-position: left center;
    background-repeat: no-repeat;
}
.rssfeed_yandex {
    background-image: url('pix/yalenta.gif');
    background-position: left center;
    background-repeat: no-repeat;
}
.rssfeed_google {
    background-image: url('pix/googleread.gif');
    background-position: left center;
    background-repeat: no-repeat;
}

А с технологией CSS спрайт, вот таким:

sprite {
    background-image: url('pix/sprite-y.png');
    background-repeat: no-repeat;
}
sprite.rssfeed {
    background-position: 0 0px;
}
sprite.rssfeed_yandex {
    background-position: 0 16px;
}
sprite.rssfeed_google {
    background-position: 0 32px;
}

Теперь посмотрим на скорость загрузки блога до использования метода спрайтов и после, с помощью сервиса Pingdom (на котором можно измерить скорость загрузки сайта),

До:

Скорость загрузки блога до использования метода CSS спрайтов

После:

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

Как видите показатели заметно изменились, но странного тут ничего нет, так как если изображений на вашем ресурсе много, то и количество http запросов при загрузке этих изображений в браузеры будет большим.

Похожие заметки
Последние заметки
Если вам понравилась статья, вы можете подписаться на RSS или e-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (доставка от SmartResponder):

10 комментариев

  1. Сергей,
    1

    Суть понял, не не понял как это сделать. Что и куда вставлять...

  2. Евгений Москаленко,
    2

    В CSS вставлять стили, а в файлы шаблона вставлять имя стилей и оборачивать их в дивы и другие теги.

  3. simpreal,
    3

    Вот еще удобный онлайн генератор:

    simpreal.org.ua/csssprites

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

  4. Евгений Москаленко,
    4

    Спасибо!) Действительно удобненький и функциональный. Ваш проект?

  5. simpreal,
    5

    Спасибо, мой :)

    Не нашел генератора, который бы работал так как хочу я, поэтому и написал свой вариант )

    Но проект еще на этапе развития и еще многое хочется добавить.

  6. Евгений Москаленко,
    6

    Вот это правильная позиция. Возможно он станет идеальным решением, в будущем.)

  7. stijit,
    7

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

  8. Евгений Москаленко,
    8

    Photoshop использую, самую последнюю версию. :)

  9. Евгений,
    9

    Благодарю за урок, но в примере кроме выгоды от спрайтов, у вас не были сами картинки оптимизированы

  10. Евгений Москаленко,
    10

    Это был пример, на самом деле я этот спрайт нигде не использовал :-)

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