Главная > CSS/Style Sheets > CSS-спрайты: неудобство или выгодный ход?

CSS-спрайты: неудобство или выгодный ход?


10 мая 2010, 14:30. Разместил: Mysterious Master
На сегодняшний день повсеместно используемые CSS-спрайты – это одна из немногих техник применения CSS, которая уже достаточно прочно зарекомендовала себя среди разработчиков. Хотя, суть этой техники была не совсем ясна, пока не была полностью объяснена и распространена Петром Станичком в июле 2003 года.

Большинство веб-разработчиков в наши дни достаточно хорошо изучили эту технику, так как в наше время в сети полно доступных обучений и статей. И почти в каждом из материалов указывается на то, что веб-разработчикам следует использовать CSS-спрайты дабы сократить число HTTP-запросов и сэкономить внушительное число килобайт. Техника используется на тысячах сайтов, включая Amazon, в котором сейчас используются мега-спрайты.

Является эта техника действительно полезной и стоящей? Или может дизайнеры таким образом просто облегчают себе работу, применяя технику, не изучив всевозможных факторов? В нашей сегодняшней статье мы обсудим плюсы и минусы применения CSS-спрайтов, акцентируя внимание конкретно на «мега»-спрайтах, а также случаи, когда применения спрайтов может быть просто потерей рабочего времени.

Браузеры кэшируют все изображения

Одно из преимуществ, которым руководствуются те, кто советуют использовать спрайты – это время загрузки изображений (или в случае с мега-спрайтами – загрузка одного изображения). Говоря конкретнее, разные кадры одного файла Gif можно использовать для разных назначений, что способствует меньшим требованиям по загрузке, так как нужно подгрузить один файл, а не несколько разрезанных картинок. Это на самом деле так. В единственном файле используется одна цветовая таблица, в то время, как отдельные файлы используют индивидуальные таблицы, что значительно увеличивает вес страницы. Также как и в ситуации с цельным JPEG-изображением или PNG-спрайтом – один файл будет весить меньше, чем несколько отдельных. Но действительно ли это такое существенное преимущество?

По стандарту все браузеры обычно кэшируют изображения, не столько важно – спрайты это или нет. Они загружают изображение только при первой загрузке страницы, последующие страницы будут использовать те же URL для повторяющихся изображений.

CSS-спрайты: неудобство или выгодный ход?

Кэш браузера Firefox с сайта amazon.com показывает, что браузер закэшировал (впишите «about:cache» в адресную строку браузера и вы все поймете).

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

Больше времени будет затрачено на разрезку дизайна

Подумайте о том, как создается 3-позиционная кнопка-спрайт – все положения должны быть расположены одно за другим, и все это должно составлять одну отдельную кнопку. В Photoshop (или любом другом приложении) у вас нет возможности разработать сразу три разных положения, при разработке проекта всего дизайна. Вам придется делать их по отдельности, а потом соединять в одно отдельное изображение.

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

Стоит ли использовать технику мега-спрайтов ради такого незначительного преимущества (тем более что скорость загрузки страницы страдает лишь при первом открытии)?

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

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

Отдельная кнопка обычно представляет собой "ul"-элемент с фиксированным значением ширины. Если спрайты для кнопок отличаются, здесь все просто: ширина и высота элемента "ul" будут такими же, как ширина и высота пункта списка и анкора, а спрайт будет просто соответствовать каждому положению. Позиция спрайта очень просто вычисляется за счет высоты и ширины каждой кнопки.

Но что же касается мега-спрайта, который используется на Amazon или на Google? Вы можете себе представить управление таким файлом и внесение изменений в значения позиций пунктов в CSS? Или что-нибудь, что касается создания кода CSS? В отличие от простой кнопки, где позиция высчитывается очень просто, мега-спрайт придется очень должно подгонять и тестировать.

CSS-спрайты: неудобство или выгодный ход?

CSS, использующийся для позиционирования спрайтового изображения в системе Google

На самом деле, это правда, что спрайт, используемый на Amazon экономит до 30 HTTP-запросов, и это значительно влияет на работу сайта. Но когда сравнение преимуществ доходит до цены разработки и поддержания стабильной работы, и в аргумент приводятся кэширование и скорость интернета, то становится понятным, что использование мега-спрайтов является не совсем преимущественным и выгодным.

За спрайтами тоже нужно следить?

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

Не все должно быть просто фоном

Еще одна причина тому, чтобы не переборщить с использованием CSS-спрайтов заключается в том, что разработчики часто сталкиваются с неправильным использованием фоновых изображений. Опытные разработчики учитывают доступность собственных проектов, и понимают, что не каждое изображение должно быть просто фоном. Изображения, которые выделяют важный контент должны быть применены прямо на странице посредством XHTML, в то время как фоновые изображения должны служить для кнопок и украшения.

CSS-спрайты: неудобство или выгодный ход?

На сайте Amazon все изображения используются правильно, и фоном выступают только изображения для украшения.

Неправильное применение спрайтов ухудшает доступность сайта

Из-за сильной пропаганды использования CSS-спрайтов, некоторые новички ошибочно думают, что ради сохранения HTTP-запросов нужно все изображения ставить как фон, даже те изображения, которые выделяют важное содержимое на странице. В результате они получает веб-сайт, которые не совсем понятен конечному пользователю, к тому же это сильно влияет на оптимизацию в поисковых системах, так как теряется возможность использования параметров "title" и "alt" для изображений.

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

Что насчет HTTP-запросов?

Многие, вероятно, будут яростно доказывать, что самая важная часть в улучшении работы сайт – это сокращение HTTP-запросов. Возьмите на заметку также показатели статистики, в которой говорится о том, что 40-60% посетителей за день приходят с пустым КЭШем браузера. Возможно, это говорит о том, что действительно стоит использовать мега-спрайты. Особенно, если учитывать то, насколько важен для посетителя первый визит на сайт.

CSS-спрайты: неудобство или выгодный ход?

Дополнение к браузеру Firefox, YSlow, анализирует производительность и количество совершенных HTTP-запросов.

Важно также учитывать, что более старые версии браузеров поддерживает только 2 одновременных HTTP-соединения, хотя свежие версии Firefox и Internet Explorer поддерживают до 6 одновременных соединений. Давайте процитируем Стива Саудерса:

«Важно понимать, что все это на основе каждого сервера. Используя несколько доменных имен, например: 1.mydomain.com, 2.mydomain.com, 3.mydomain.com и т.д., позволяет разработчику достичь нескольких соединений с сервером. Это возможно даже если доменные имена являются лишь CNAME единого IP-адреса.»

В итоге, может быть когда-то преимущества CSS-спрайтов будут выгодными относительно использования отдельных кнопок, - это будет тогда, когда появятся более совершенные браузеры и просто грандиозная скорость сети Интернет. А вот преимущества использования мега-спрайтов вообще не стоит рассматривать, вряд ли их использование когда-нибудь станет уместным.

Что насчет генераторов спрайтов?

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

CSS-спрайты: неудобство или выгодный ход?


Некоторые инструменты, например как один от «Project Fondue», позволяет вам выставлять определенные опции на выходе. Инструмент Стива Саудерса также предлагает вам возможность расстановки параметров. SpriteMe переконвертирует фоновые изображения с существующего веб-сайта в отдельное изображение-спрайт (что на деле является мега-спрайтом), которое вы позже можете скачать и использовать в своих проектах. И опять же, хоть этот инструмент и делает за вас спрайт, но он не будет выполнять работы по его установке за вас. Такой инструмент больше подойдет для тех сайтов, которые уже полностью готовы, но на которых не использовалась техника мега-спрайтов.

CSS-спрайты: неудобство или выгодный ход?


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

Внимание должно быть сконцентрировано на многосторонних проблемах производительности

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

Существует также и сторонние от HTTP-запросов вещи, на которых разработчикам также стоит обратить внимание. В число этих вещей входит GZipping, правильное внедрение внешних скриптов, оптимизация синтаксиса CSS, уменьшение веса файлов JS, улучшение производительности AJAX, а также избежание синтаксиса javascript, который может влиять на производительность, а также многие другие вещи…

CSS-спрайты: неудобство или выгодный ход?

YSlow отображает множество различных областей (кроме HTTP-запросов), которые могут влиять на производительность сайта

Если разработчики потратят время на рассмотрение и изучение подобных факторов, влияющих на производительность веб-сайта, и взвесят все «за» и «против» грамотно, то вполне возможно, что они придут к выводу, что применение CSS-спрайтов является не совсем разумным ходом. И, впоследствии, обратят свое внимание на иные факторы, за счет которых есть возможность повлиять на работу сайта.
Вернуться назад