Автор: Крис Койер
Перевод: Всеволод Козлов

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

В этой статье я расскажу Вам об отличном способе снижения в разы количества HTTP-запросов и ускорения загрузки Вашего сайта!

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

Не буду лить теорию, а сразу перейду к наглядной демонстрации мощи данного приема!

Допустим, имеется навигационное меню, состоящее из 5 пунктов, каждый из которых помимо текста содержит изображение с эффектом ролловера (при наведении мыши на изображение оно подменяется другим):

CSS Sprites - что это и почему требует внедрения в повседневную практику веб-разработки?

Фрагмент CSS-кода этого меню

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
...

Как видите, используется 10 изображений, отсюда имеем 10 HTTP-запросов, общий вес этих ихображений 20.5 Кб.

Используя CSS Sprites, мы уменьшим число HTTP-запросов до 1, а общий вес изображения (уже одного!) до 13 кб.

CSS Sprites - что это и почему требует внедрения в повседневную практику веб-разработки?

Фрагмент CSS-кода с использованием CSS Sprites

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
...

Как Вы уже поняли, суть CSS Sprites заключается в использовании 1 изображения вместо 10.

Эффект ролловера задается в CSS с помощью задания отрицательного значения по вертикали:

CSS Sprites - что это и почему требует внедрения в повседневную практику веб-разработки?

Для бесплатной оценки параметров загрузки Вашего сайта используйте сервис WebSiteOptimization.

Оригинал статьи: CSS Sprites: What They Are, Why They’re Cool, and How To Use Them















Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: