[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]

  • Страница 1 из 1
  • 1
Форум » Интернет » Всё для создания WEB сайта » Веб-строительство » CSS спрайты
CSS спрайты
ingvarr
(65528) Вне сайта
Дата: 05.12.2010, 16:27:13 | Сообщение № 1
admin
Репутация: 734
Награды: 117
Поговорим о такой замечательной вещи как CSS спрайты.

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

При большом количестве подгружаемых картинок, канал немного забивается, тем самым уменьшая скорость загрузки вашего сайта. Что бы ослабить нагрузку на пропускной канал и на сервер, где располагается ваш сайт, можно объединить большинство графических элементов в одну картинку. И вот тут, на помощь приходит CSS спрайт.

Объединяя много картинок в одну, мы снижаем нагрузку на канал и на сервер. Ведь, например если мы объединили 10 картинок в одну, то вместо 10-ти http запросов на сервер будет отправлен всего 1 запрос. Можно объединять с помощью фотошопа все иконки сайта в одну, но это оказалось слишком долго. И вот тут может прийти на помощь сервис, который все это делает сам.

Вот этот сервис - http://spritegen.website-performance.org/.

Скидываем все картинки, которые хотим объединить, в одну папку. Например, делаем CSS спрайт из картинок одного и того же размера (например для иконок 16*16, их все скидываем в одну папку). Папку заворачиваем в ZIP архив, и на сайте выбираем наш архив. Далее мы опускаемся до вот этого меню - Sprite Output Options.

В пункте Build Direction, выбираем в каком виде будет на выходе рисунок: горизонтальный или вертикальный. Далее в пункте Horizontal offset и Vertical offset ставим значения ширины и высоты картинок, которые мы поместили в архив. Ниже выбираем выходной формат спрайта, качество изображения и жмем на кнопку Create Sprite Image.

Теперь о сути того, как это все теперь использовать.

В CSS файле стилей вашего сайта, когда подгружаются все картинки по одной, структура подгрузки примерно такая:

Code
ssd.home-1 {  
background-image:url('./images/icon-1.gif')  
}  
ssd.home-2{  
background-image:url('./images/icon-2.gif')  
}  
ssd.home-3{  
background-image:url('./images/icon-3.gif')  
}  
ssd.home-4 {  
background-image:url('./images/icon-4.gif')  
}

А с использованием CSS спрайта структура меняется на вот такую: :)

Code

ssd{  
background-image:url('./images/icons.gif');  
background-repeat:no-repeat;  
}  
ssd.home-1 {  
background-position:0 0;  
}  
ssd.home-2{  
background-position:0 -16px;  
}  
ssd.home-3{  
background-position:0 -32px;  
}  
ssd.home-4{  
background-position:0 -48px;  
}

То есть, суть такова, что мы подключаем всего 1-у картинку, а потом для каждого элемента прописываем позицию нужной части картинки. Во втором примере позиции прописаны для картинок с разрешением 16*16 и сам CSS спрайт (одна большая картинка) вертикальный.


Прикрепления: 1506647.jpg(15.4 Kb)
Ответить



Форум » Интернет » Всё для создания WEB сайта » Веб-строительство » CSS спрайты
  • Страница 1 из 1
  • 1
Поиск:

Рейтинг@Mail.ru HotLog