Sozdaiblog.ru
Назад

Что такое CSS спрайты и как их сделать?

Опубликовано: 02.05.2013
Время на чтение: 7 мин
6
1

css спрайты

Здравствуйте, уважаемые читатели — Sozdaiblog.ru!

В этом посте Вы узнаете, что такое CSS спрайты и, как их сделать.

CSS спрайт – это одно изображение, которое включает в себя несколько более мелких. Данный термин относится к сайтостроению и предполагает объединение нескольких небольших графических файлов в один большой.

Для чего же нужны CSS спрайты? Благодаря их использованию можно повысить производительность вашего ресурса, а также увеличить скорость загрузки Веб-страниц.

Как и почему это происходит?

Это происходит по двум основным причинам.

Во-первых, сервер загружает лишь один графический элемент, а не 5, 6 или 10. В этом случае сокращается число HTTP-запросов и повышается производительность и скорость загрузки сайта. Если бы картинки загружались по одной, то число HTTP-запросов было бы намного больше. При этом не имеет значение то, что сами изображения являются небольшими по объему и размеру.

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

При этом сам CSS спрайт часто называют «Sprite Sheet». Но, на мой взгляд, больше этот термин относится к CSS спрайтам, сделанным лишь из кнопок и иконок сайта.

После создания спрайта нужно посредством правил CSS грамотно вставить его в нужные места на сайте. При этом используются такие параметры CSS, как background-position, а также background-image.

То есть в background-image во всех случаях указывается одно и то же изображение спрайта. А вот в background-position в каждом случае надо указывать разные значения для того, чтобы CSS спрайт сдвигался на необходимую величину, и отображалась определенная картинка.

CSS спрайты можно легко сделать при помощи специальных онлайн-сервисов. Давайте кратко рассмотрим два таких сервиса.

Сервисы создания CSS спрайтов.

1. Css-sprit.es

css спрайты

Здесь имеются 2 опции – стандартная загрузка и мультизагрузка. Вы выбираете необходимые файлы иконок, кнопок и так далее при помощи опции «Add New File».

Затем настраиваете формат конечного изображения (PNG, GIF или JPG) и язык стилей — CSS или SASS. Можно поставить галочку напротив «CSS Compression». В этом случае полученный фрагмент кода CSS будет сокращен и оптимизирован.

В опции «Rollover Effect» можно выбрать выходной эффект картинки (сепия, черно-белый и т.д.). В самом низу находится кнопка «Create CSS Sprite».  Она означает «Создать CSS спрайт».

2. Csssprites.com

css спрайты

Простой и функциональный генератор спрайтов. Выбирайте необходимое количество графических файлов, нажимая на кнопку «Need more», а затем жмете кнопку «Generate». Кроме того, можно открыть дополнительные опции. Там есть следующие настройки – отступы между изображениями, выравнивание элементов и фоновый цвет спрайта.

В завершении этого поста мне хотелось бы задать вопрос!

Используете ли  Вы CSS спрайты в своих Веб-ресурсах? Если да, то, какими сервисами пользуетесь для их создания?

На этом всё. Всего Вам наилучшего.

Автор поста: Инкогнито.

Сайт автора: В разработке.

Поделиться
Похожие записи
Комментарии:
  • Сергей Москвитин
    Опубликовано: 01.06.2013 Ответить на сообщение

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

    • Инкогнито
      Опубликовано: 01.06.2013 Ответить на сообщение

      Пожалуйста, Сергей! На самом деле таких сервисов очень много. Странно, что Вы раньше про них не слышали.

  • Константин
    Опубликовано: 01.06.2013 Ответить на сообщение

    КЛАСС! Отличная вещь. Спасибо! Будем пробовать.

    • Инкогнито
      Опубликовано: 01.06.2013 Ответить на сообщение

      Пожалуйста! Обращайтесь!

  • Надежда Пинчук
    Опубликовано: 02.06.2013 Ответить на сообщение

    Спасибо, Денис за информацию.CSS спрайты. Как -то до них руки не доходили. Между тем, они оказываются помогают повысить производительность блога, а также увеличить скорость загрузки Веб-страниц.Эти функции важны для блога

    • Денис Черников
      Опубликовано: 02.06.2013 Ответить на сообщение

      Надежда, спасибо не мне, а автору поста!)))

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.