Что такое 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

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

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

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

2. Csssprites.com

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

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

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

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

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

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