Подтвердить что ты не робот

В чем преимущества использования CSS Sprites в веб-приложениях?

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

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

ОБНОВЛЕНИЕ: Спасибо за ваши ответы. Очевидно, что они очень тщательно продуманы и представляют хорошие источники для проверки ваших очков. Я чувствую себя намного более способным принять обоснованное решение об использовании спрайтов CSS в своем дизайне сайта.

4b9b3361

ОТВЕТЫ

Ответ 1

Вопрос, как правило, заключается не в размере полосы пропускания можно. Это больше о снижении количества HTTP-запросов, необходимых для создания веб-страницы.

Учитывая:

  • веб-браузеры выполняют несколько запросов HTTP параллельно
  • выполнение HTTP-запроса означает обратную связь с сервером, что занимает много времени
  • у нас есть "быстрое" подключение к Интернету, что означает, что мы быстро загружаемся...

Что требует времени, когда множество запросов на получение небольшого содержимого (например, изображения, значки и т.п.) - это многократные обратные поездки на сервер: вы тратите время на ожидание запроса и сервер для ответа, вместо того, чтобы использовать это время для загрузки данных.

Если мы сможем минимизировать количество запросов, мы минимизируем количество поездок на сервер и лучше используем наше высокоскоростное соединение (мы загружаем более крупный файл, а не ожидаем многие более мелкие).

Вот почему используются спрайты CSS.


Для получения дополнительной информации вы можете посмотреть, например: CSS Sprites: Изображение Slicings Kiss of Death

Ответ 2

Меньше HTTP-запросов = более быстрая загрузка в целом. Yahoo и co. используйте эту технику, если вы можете себе представить, сколько у них пользователей они сохраняют большую пропускную способность. Представьте себе 50 отдельных изображений для значков, которые содержат 50 отдельных запросов HTTP, а не только один css-спрайт, содержащий все изображения, что позволит сохранить 49 HTTP-запросов и умножить их на всех пользователей сайта.

Ответ 3

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

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

Ответ 5

Помимо повышения производительности общей загрузки страницы, ограничивая количество запросов, спрайты изображений также могут выполнять динамическую замену изображений (например, изменение фонового изображения элемента навигации при наведении), "выполнить" немного лучше, поскольку все вы do - это изменение x, y вместо src.

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

Ответ 6

В дополнение к сокращению HTTP-запросов (как уже отмечалось), спрайты CSS не зависят от JavaScript. Это дает несколько других преимуществ:

  • меньше кода для поддержки
  • упрощенное кросс-браузерное тестирование
  • может быть закодирован inline с помощью атрибутов style
  • нет взлома DOM
  • нет предварительной загрузки изображений (так что меньше административной информации - "Ой, подождите, мне нужно предварительно загрузить эту новую кнопку навигации... дерьмо, в каком .js файле есть мой предварительный загрузчик?" )
  • вы можете использовать классы css для применения к нескольким селекторам
  • может применяться к любому селектору с псевдоклассом :hover или в любом селекторе, который может быть обернут якорем (а не только img s)

Если вы не прочь взломать DOM, вы можете получить некоторые изящные эффекты анимации, просто нажимая значения X и Y. Это облегчает анимацию множества разных состояний (например, keypress или onmouseclick).

Есть несколько интересных графических побочных эффектов:

  • меньше графических рабочих файлов
  • проще сделать макет для кнопок и т.д. непосредственно в HTML (меньше необходимости в PSD-comps)
  • проще сделать изменения графического интерфейса без необходимости регенерации тонны графики
  • просто намного труднее для пиратов изображений, чтобы разграбить вашу графику.