Блог У кого спрайт лучше?

У кого CSS спрайт лучше?Думаю, не стоит объяснять, насколько полезными иногда бывают спрайты. В умелых руках спрайты делают чудеса. Применение у них достаточно широкое. В спрайты можно объединять мелкие изображения, тем самым уменьшая количество запросов к ним. В спрайты можно и нужно объединять картинки для роловера (эффект смены изображения при наведении). Но какие технологии создания CSS спрайта используются в верстке сейчас, у кого спрайт лучше?
Рассмотрим спрайты популярных сайтов и попробуем проанализировать технологию их создания. Я выбрал 4 сайта:

  1. Twitter.com
  2. Facebook.com
  3. Google.com
  4. Yahoo.com

1. CSS спрайт Twitter

Спрайт twitterСпрайт подключается к строчному элементу <span>, который делают блочным (display:block), чтобы задать ширину и высоту. Для каждого элемента через класс прописывается свойство background c необходимыми координатами (background-position). Спрайт сделан сеткой в виде шахматной доски с ячейками 16*16px залитыми фоном.

Плюсы:

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

Минусы:

- можно использовать только для блоков с фиксированными размерами

2. CSS спрайт Facebook

Спрайт facebookНа Facebook спрайты разделяются на типы, роловеры выделяются в отдельные спрайты. На картинке три различных спрайта. Хотя, не совсем понятно необходимость третьего, т.к. на нем повторяются иконки со второго. Спрайт подключается к строчным тегам <a> <i> <span>. У элементов задана высота и ширина. Для каждого элемента через класс прописывается свойство background-image c необходимыми координатами.

Плюсы:

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

Минусы:

- можно использовать только для блоков с фиксированными размерами
- повторяются иконки на различных спрайтах

3. CSS спрайт Google

Спрайт googleСпрайт подключается к строчным тегам. У элементов задана высота и ширина. Для каждого элемента через класс прописывается свойство background-image. Довольно часто координаты прописываются через инлайн-стили.

Плюсы:

- спрайт компактный

Минусы:

- можно использовать только для блоков с фиксированными размерами
- картинки размещены не по сетке, сложно расширять и поддерживать такой спрайт
- использование инлайн-стилей

4. CSS спрайт Yahoo

Спрайт Yahoo сразу сложно заметить, т.к. он очень сильно растянут по высоте. Подключается к строчным и блочным элементам. Для строчных элементов ширина устанавливается при помощи внутреннего отступа (padding). Для всех элементов через общий класс прописывается свойство background-image. Координаты прописаны через дополнительный класс для каждого отдельного элемента. За счет того, что картинки на спрайте находятся на расстоянии друг от друга, их можно применять для блоков различного размера и определять для них различные значения background-position.

Плюсы:

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

Минусы:

- спрайт очень большой по размерам

Подводим итог

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

Лучший CSS спрайт должен:

  • легко поддерживаться и расширяться
  • задаваться через единый класс, чтобы не переписывать много раз свойство background-image для элементов
  • иметь возможность задаваться для любого элемента не зависимо от его размеров
  • находить золотую середину между весом и количеством картинок в нем. Если картинок слишком много и вес значительно увеличивается, то нужно спрайт разбивать на несколько типовых спрайтов

Своих 5 копеек:

Так же хочу отметить, что ни один из приведенных сайтов не использует один простой, но очень полезный прием. Я часто задаю спрайты не для тегов <span> <em> и <a>, как делают сайты-гиганты, а для однопиксельной прозрачной картинки. Какой в этом смысл спросите вы?

Дело в том, что картинка является строчным элементом и в тоже время для нее можно задавать необходимую высоту и ширину, чего нельзя сделать для тегов <span> <em> и <a>

В комментариях делитесь своими технологиями по созданию и использованию спрайтов.

Поделиться ссылкой на статью:

Предыдущая статья
Следующая статья

Комментарии

Egor 25 октября 2010 года, 11:45 #

Для чего у спрайта яркий сиреневый фон?

webmolot 25 октября 2010 года, 12:01 #

У спрайта, который использует Twitter, фон сделан в виде шахматной доски. Это помогает легко находить координаты любой иконки.

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

Алексей 25 октября 2010 года, 12:24 #

Чтобы некоторые иконки не сливались с фоном и можно было видеть границы, скорее всего.

Dmitry Scriptin 25 октября 2010 года, 13:44 #

Проблема с однопиксельной прозрачной картинкой в том, что получаем еще один HTTP-запрос для этой картинки. И этот запрос гораздо длиннее, чем запись «display:block» =)

Полагаю, инлайновые стили тоже используются для экономии траффика. Насколько я знаю, так делают и в Яндексе.

webmolot 25 октября 2010 года, 14:22 #

@Dmitry Scriptin, с дополнительным запросом согласен и, возможно, на больших проектах, этот подход не будет оправдан. Но, по моему, он семантически более правильный, чем использование пустых тегов <span> <em> и <a>

Интересно, сколько трафика сэкономится инлайновыми вставками background-position :) . Это не тот случай, когда все стили вынесены в html и мы не грузим файл css.

Ценитель 25 октября 2010 года, 16:36 #

Хочу передать удар в глаз тому человеку, который сделал дизайн этого сайта. За несоблюдение стандартных принципов расположения данных. За всобачивание никому не нужно вторичной колонки слева/по центру, а с важными данными где-то там, с права. В результате чего приходится косить глазом и читать.

webmolot 25 октября 2010 года, 16:43 #

@Ценитель, спасибо за столь хорошие слова в мой адрес :). Но именно для таких людей как Вы, для «ценителей», я сделал возможность менять расположение колонок. Можете основной контент хоть во всю ширину развернуть. Для этого есть панель настроек, слева.

Перспективный блоггер 25 октября 2010 года, 17:36 #

Дело в том, что картинка является строчным элементом и в тоже время для нее можно задавать необходимую высоту и ширину, чего нельзя сделать для тегов <span> <em> и <a>

Вот сейчас как раз верстаю очередной проект с одним большим спрайтом и все пытался вспомнить/понять, чего раньше в одной конторе, где я работал, использовались в качестве блоков для иконок как раз <img>… Волновал меня этот вопрос, волновал, когда тут ваша статья :) . А все гениальное, как всегда, оказалось простым.

По теме:

- Верстальщик Твиттер, я считаю, переусердствовал с шахматной доской. Вроде как он однозначно определил координаты левого края, но не всегда внутри блока нужно выровнять именно по координатам левого края в спрайте, бывает, нужно и сдвигать внутри блока, так что перспектива экономии времени при таком подходе видится мне туманной. Имхо, только спрайту вес увеличил. Кстати, когда ничего лишнего в спрайте незакрашено, иногда можно и ошибиться на 1-2 px, а у него уже и нельзя, и еще он себя собственноручно «привязал» к заданию блокам размеров иконок, что вообще, имхо, лишнее.

- В следующих проектах буду использовать для каждого спрайта свой стиль и менять только background-position; — так и вправду резоннее.

- Спрайт у Яху просто огромный… Надо бы переделать :)

Кстати, попутно вопрос: «Кто как вешает баллеты на li в текстах? Делаете в спрайте большой вертикальный отступ или все же баллет отдельной картинкой?»

P.S. webmolot, исправь валидацию формы комментирования, не пропускает Nikolas_Sharp[cab@4ka]bigmir.net

GreLI 25 октября 2010 года, 18:00 #

Дело в том, что картинка является строчным элементом и в тоже время для нее можно задавать необходимую высоту и ширину, чего нельзя сделать для тегов <span> <em> и <a>

С этим справится span { display: inline-block }
Не поддерживает его только, уже отмерший, Firefox 2.0.

GreLI 25 октября 2010 года, 18:03 #

Ну вот, html-теги вроде есть, а таких полезных в обсуждении как <blockquote> или <code> нет :-(. Да и pre почему-то не сработал.

Перспективный блоггер 25 октября 2010 года, 20:04 #

иногда можно и ошибиться на 1-2 px, а у него уже и нельзя
Преимущество спрайта как в Twitter в том, что он как раз и помогает не ошибиться в эти 1-2px, т.к. легко считаются координаты. 1 ячейка равна стандартному размеру иконки 16*16px

Кто как вешает баллеты на li в текстах? Делаете в спрайте большой вертикальный отступ или все же баллет отдельной картинкой?
Я думаю, что выбор того или иного способа зависит от ситуации. И один и другой способы могут быть оправданы.

GreLI, еще есть заказчики, которым нужна поддержка ie6.
Поддержку тегов в комментариях еще буду настраивать, спасибо за замечание.

remal, ага, кто-то еще думает, что и сайт автоматически должен создаваться :) Не смешите.

remal 25 октября 2010 года, 19:25 #

Спрайт должен создаваться автоматически. Поэтому разговаривать о простоте его использования и создания просто бессмысленно.

Тёма 25 октября 2010 года, 20:29 #

>> Дело в том, что картинка является строчным элементом и в тоже время для нее можно задавать необходимую высоту и ширину
Вообще-то это самый типичный случай display: inline-block

remal 25 октября 2010 года, 22:08 #

> remal, ага, кто-то еще думает, что и сайт автоматически должен создаваться :) Не смешите.
Если у вас нехватка умений, чтобы реализовать автоматическую генерацию или незнание современных тулов, которые это умеют делать, то не надо думать, что весь мир такой.

Про создавать сайт автоматически… Можете смеяться, но это — один из моих проектов. И работа движется вполне успешно.

webmolot 25 октября 2010 года, 22:42 #

remal, рад, что у вас все успешно! Если Вы имеете ввиду создание генераторов для шаблонных сайтов, то это не новость. Я говорю про сайты с эксклюзивным, не шаблонным дизайном, где нужно думать над версткой.

Максим 26 октября 2010 года, 8:50 #

Хочу сделать сказать про твои пять копеек — лучше использовать не однопиксельные картинки, а немного побольше — 30x30px или 50х50px. Даю этот совет в силу того, что поисковые роботы могут счесть эти изображения за спан или скрытые элементы.
А в остальном полностью согласен и поддерживаю!

Перспективный блоггер 27 октября 2010 года, 1:02 #

GreLI, стараюсь работать только с серьезными заказчиками, которые ищут качества за хорошие деньги, и однозначно могу сказать вам, что все как один требуют поддержку IE6, и то, что в Рунете осталась, слава Богу, пара процентов его пользователей, их не колышит. Любой человек из этой пары процентов может стать их потенциальным клиентом, а там, где вертятся деньги, на счету каждый клиент. В общем, inline-block отпадает :) .

remal, а вы уверены, что это не у вас нехватка опыта верстки серьезных проектов, где как правило требуются абсолютно нестандартные решения и нетрадиционные подходы и, порой, нужно так изощриться, что ни 1 робот в жизни такого не придумает? Другой раз сам себе удивляешься, как такое придумал, а у вас все программа делает :) . Наверное, пока у нас на столах не будут работать квантовые компьютеры и мы не перейдем в век адаптивной (самообучающейся) логики и громадных компьютерных мощностей, вряд ли появится программа, способная выполнять верстку серьезных проектов :) .

Dmitry 30 октября 2010 года, 19:54 #

Ресайз однопиксельной картинки — интересный ход, но он тоже имеет свои побочные эффекты, о которых не упомянуто в статье: любой ресайз картинки приводит к торможению скорости отрисовки страницы. Опираюсь на исследования webo.in

Андрей 24 ноября 2010 года, 14:01 #

Я использовал :before для спрайтов, основному блоку ставлю position:relative и margin-left с шириной спрайта, а спрайт позиционирую абсолютно. Таким образом спрайт выносится за границы подчеркивания ссылок, но наведение и клик на него работает. Как вам такое решение?

webmolot 24 ноября 2010 года, 14:27 #

Dmitry, да, возможно Вы правы, но на небольших проектах торможение вряд ли будет ощутимым.

Андрей, Вы описываете какой-то свой частный случай, поэтому не совсем понимаю о чем идет речь. Если хотите свою мысль донести народу, то можете дать ссылку на рабочий пример с комментариями.

bulls 04 декабря 2010 года, 17:32 #

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

Foggy 03 января 2011 года, 0:29 #

Андрей, если у вас есть блог, опишите, пожалуйста, ваш способ с приведением примеров. Мне действительно интересно увидеть. Вы, как я понял, не задействуете лишних тегов, что есть хорошо.
webmolot, большое спасибо за действительно толковую статью.

Со спрайтами я работал всего лишь один раз — в собственном портфолио, ввиду отсутствия большого количества хотя бы более-менее крупных проектов.
Делал их по принципу шахматной доски, но во имя экономии каждого пикселя (да-да, сотрите слезинку с моей щеки), делал их не совсем квадратными, а по размеру иконки. Некоторые приходились и по 8 пикселей в ширину. У меня есть картинки в 16pх*16px, и есть 32pх*32px. Недолго думая, я решил поместить их в один спрайт. Не думаю, что это доставит мне много хлопот.
Теперь перейду к тегам. Против тега img я конкретно против. Во-первых, ни к чему совершенно лишние обращения к серверу, которые я (быть может, по глупости) экономлю на всём, на чём только можно, даже на каждом пикселе картинок. Мне приходилось делать фон только лишь ссылкам и одному span’у в заголовке сайта.
На сколько я понял Андрея, мой способ решения проблемы близок к его способу. background’ом я задал общий спрайт и отступы в нём. Потом padding’ом задал отступ справа и установил ширину блока, конечно же. При этом позиционирование у span’а я установил relative, а у выше стоящего элемента — absolute. Картина готова: установлен фон для заголовка. Посмотреть можно тут пример (спамом это не назвать — всё равно портфолио пустое)

Арт радикс 01 февраля 2011 года, 16:36 #

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

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com