CSS спрайты

Суббота, июля 26, 2008 9:21

Рубрика CSS

Я думаю многие слышали о CSS спрайтах, но возможно не все знают что это такое и как их использовать. CSS спрайты представляют собой несколько различных картинок объединенных в одно целое изображение. Это изображение устанавливается как фоновое (background) для div-блока, или любого другого элемента, с заданной высотой и шириной. С помощью параметра background-position мы позиционируем наше изображение так, чтобы оно выглядело как картинка. Чтобы стало понятнее приведу пример. Допустим у нас есть картинка-ссылка и нам нужно, чтобы при наведении указателем мыши на эту картинку она изменялась. Нет проблем.
А вот код для того что мы сделали:

HTML

<a href="http://dimonblog.ru” class=”sprite-demo“> </a>

CSS

a.sprite-demo {
	display:block;
	width:100px;
	height:30px;
	background:url(http://dimonblog.ru/wp-content/img/css-sprite.png) left top;
	}
a.sprite-demo:hover {background-position:left 30px;}

Ниже представлена картинка, с помощью которой мы это сделали. Заметьте - всего одна.

Конечно, мы могли бы добиться подобного эффекта используя две отдельные картинки. Но, используя CSS спрайты мы уменьшаем количество запросов браузера к веб-серверу, тем самым уменьшая время загрузки страницы. Одновременно снижается нагрузка на сервер, что важно при высокой посещаемости сайта. В добавок к этому мы устранили задержку перед отображением второй картинки, т.к. браузеру уже не надо загружать второе изображение после наведения указателем мыши на картинку - оно уже есть. И наконец, используя CSS-спрайты мы уменьшаем общий размер фалов с графикой. Например, размер картинки, которую я использовал - 2098 байт. Если использовать 2 отдельные картинки, то их общий размер составит 2410 байт. К тому же, я советую все мелкую графику на сайте (и скругляющие уголки сюда же) делать с помощью CSS-спрайтов. Причем по возможности все в одном файле. К примеру я делаю вот так:

Как правило размер такой картинки не очень большой. У меня обычно выходит в среднем 1.5 Кб. К тому же такую картинку можно встроить в сам файл стилей через data:url, благодаря чему, у пользователей нормальных браузеров будет отображаться вся мелкая графика, в том числе и закругленные уголки, даже если загрузка графики отключена в настройках браузера. А так как IE не поддерживает data:url для него можно отдельно прописать загрузку картинки с сервера. Недостатком CSS-спрайтов я считаю то, что их не очень удобно использовать и необходимо подготавливать изображения на что тратится время.

Вы можете следить за развитием темы при помощи ленты RSS 2.0 .

Метки: CSS, Верстка

22 коммент. к “CSS спрайты”

Creator пишет:

29 апреля 2009 в 12:24

Это работает и просто для стиля a без всяких спрайтов, которые в свою очередь наверняка не валидны.
Dimon пишет:

1 мая 2009 в 16:24

Интересно с чего вы взяли, что CSS-спрайты не валидны?
Сергей пишет:

28 июля 2009 в 6:56

Хорошая статья. Давно искал реализацию, теперь постараюсь сделать это для своего журнала. А на снобов не нужно обращать внимание.
Алик пишет:

30 июля 2009 в 2:22

Creator, очень даже валидны и активно используются google и yahoo.
Спасибо за статью!
Саня пишет:

7 октября 2009 в 10:14

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

12 октября 2009 в 13:49

Плохо, что Фаерфокс не видит этих спрайтов
Армен пишет:

16 октября 2009 в 18:36

Юрий, FireFox очень даже хорошо видит.
Вы наверно что-то не так написали.
Armen пишет:

13 ноября 2009 в 23:47

подскажите, а если спрайтов много, например штук 15-20, как их реализовать?
kyoks пишет:

19 ноября 2009 в 16:21

Armen, видимо, придется для каждого прописывать свой css-код. Например: a.sprite-demo1, a.sprite-demo2, a.sprite-demo3 и т.д.
Armen пишет:

24 декабря 2009 в 22:40

а если спрайтов много? как удастся спрятать остальные? у меня еще остаются видны2-3 спайта и я не знаю, что с ними делать
Макси пишет:

27 января 2010 в 14:25

(”…..Недостатком CSS-спрайтов я считаю то, что их не очень удобно использовать и необходимо подготавливать изображения на что тратится время”)

Записать Экшен в ФШ и процесс автоматизируеться.
Максим пишет:

27 января 2010 в 14:27

меню с применениа спрайтов.

http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
Максим пишет:

27 января 2010 в 14:27

демо при мер работы
http://www.sohtanaka.com/web-design/examples/hover-over-trick/
Артём пишет:

12 февраля 2010 в 14:31

Большое спасибо за простое объяснение такой полезной вещи!
Луганчанин пишет:

3 июля 2010 в 17:11

Нагрузку на сервер дают языковые интерпретаторы (php,ruby,и.т.д) и база данных. Картинки обычно не сильно грузят сервер, особенно если они расположены отдельно, к примеру за nginx.
Использование css спрайтов должно быть оправдано, ведь делать дизайн с их использованием просто из-за того, что это модная или новаторская “фишка” нецелесообразно.
Александр пишет:

29 августа 2010 в 16:13

Проблема расположения отдельных фрагментов на общем листе (…остаются видны2-3 спайта и я не знаю, что с ними делать…) - решается планированием. Необходимо сразу просчитывать где и как будут выводиться картинки, фоновые цвета и т.д. И не забывать чётко указывать repeat (повторение фона)… У спрайтов есть свои сложности, но в целом - это очень удобная вещь. Сам использую везде, где могу.
Воффка пишет:

5 октября 2010 в 5:40

Точно.. нафиг такое делать, если можно все это сделать намного проще.. ппц
bulls пишет:

24 октября 2010 в 19:29

Дизайн верхнего меню css спрайты, на одном листочке восемь нарисованных кнопок, грузиться один раз , http://creativo.kz/ очень удобно
Леонид пишет:

2 декабря 2010 в 22:36

Как сделать повторение фрагмента из спрайта. Именно фрагмента, а не всего спрайта.
Никак не могу разобраться..
Иван пишет:

4 ноября 2011 в 1:53

А что делать, если меню полностью на спрайтах, а в браузере отключена графика? Когда просто картинка - есть аттрибут alt.. А когда одни спрайты и отключена графика - ничего не выведится..
Спасибо.
Dimon пишет:

4 ноября 2011 в 2:16

Иван,
так спрайты можно положить на бэкграунд однопиксельному прозрачному гифу растянутому до нужных размеров:

HTML
<img src="blank.gif" width="100" height="100" alt="О сайте" />

CSS
img {background: url(sprite.png);}
Compas пишет:

25 декабря 2011 в 18:23

>> background:url(http://dimonblog.ru/wp-content/img/css-sprite.png) left top

left top лишнее в примере?

Блог вебмастера