—»     —»   CSS-спрайты: неудобство или выгодный ход?
  Раздел: CSS/Style Sheets   Комментариев: 4  

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

На сегодняшний день повсеместно используемые 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-спрайтов является не совсем разумным ходом. И, впоследствии, обратят свое внимание на иные факторы, за счет которых есть возможность повлиять на работу сайта.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, генераторы
Опубликовал Mysterious Master   Прочитано (раз): 10997   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 11 мая 2010 @ 01:19
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Вот оно, то что надо winked
Как раз в дипломе ("Создание интерфейса учебного заведения") сейчас пишу про Спрайты, про их необходимость при создании удачного, продуманного интерфейса.
Спасибо, что выложили данную информацию.
Очень полезная статья - освежил память и узнал кое что новенькое. laughing


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #2: 11 мая 2010 @ 03:15
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
ITS, диплом будет защищен на "отлично" winked
Комментарий #3: 12 сентября 2010 @ 07:20
Написал: Евгений — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я эту штуку видел в яндексе когда выводятся иконки сайтов. Берется PNG картинка с иконками а потом уже нарезается. Классная вещь, надо поработать над сайтом
Комментарий #4: 28 февраля 2011 @ 10:00
Написал: Expert — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
О спрайтах коротко:

ПЛЮСЫ - ЗАМЕТНО повышают КПД сайта.
-лучше ужаты JPEG;
-нет затрат на заголовки, индексы в таблицы цвета, нет лишних таблиц цвета у GIF;
-лучше ужаты,-нет затрат на заголовки, индексы в таблицы цвета, нет лишних таблиц цвета у PNG-8;
-лучше ужаты PNG-24, особено если много сплошных цветов.
-меньше HTTP запросов;
-быстрее восстановление из кэша.

МИНУСЫ -ГЕМОР при разработке сайта.
-затрата времени
-вытеснение собственной любимой лени.

ЭКСПЕРТЫ ВЫБИРАЮТ СПРАЙТЫ.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Декабрь 2022    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031