Когда CSS спрайты было бы хорошо использовать, а когда нет?

Question

В каких сценариях было бы хорошо использовать спрайты CSS, а когда нет? Это экономит время или только запрос сервера?

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

Когда и где использование css sprite позволяет сэкономить время (в работе)?

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

Каковы другие хорошие способы использования, которые могут сэкономить наше время один раз и в будущем (если изменения в дизайне) и то и другое?

Редактировать: Спрайты предназначены только для фона CSS, поэтому следует ли максимально использовать изображения в фоновом режиме, чтобы сохранить запрос сервера, разве это хорошая идея?

Обновление:

Реализация требует больше времени, чем обычный метод, и в основном клиент не сильно беспокоится о такой медлительности, как http-запрос. Мой вопрос заключается в том, можем ли мы сэкономить время в процессе создания сайта и в дальнейшем обслуживании сайта с помощью css sprite. или достаточно обычного метода.

В двух словах, мой вопрос: «Могут ли спрайты CSS сэкономить время нашего дизайнера и кодировщика xhtml css (я не говорю о запросе к серверу)?»

Answer 1

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

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

Другими показателями, которые в значительной степени совпадают, будет сведение, сжатие и объединение ваших скриптов и стилей в один файл js и один файл css.

EDIT

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

Answer 2

Уменьшает количество HTTP-запросов, что повышает производительность сайта.

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

В Свернуть HTTP-запросы

Answer 3

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

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

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

• Спрайты добавят немного времени вашим разработчикам CSS. Это не должно повлиять на ваших дизайнеров. Но имейте в виду, что ваши разработчики кодируют сайт один раз; преимущества спрайтов применяются каждый раз, когда кто-то просматривает сайт.

Answer 4

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

Answer 5

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

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

Любой сценарий, когда у вас есть несколько фоновых изображений одинакового размера, которые заменяют друг друга (или дополняют друг друга), идеалендля спрайтов.

Answer 6

Спрайты всегда хороши в использовании. Они помогают ускорить загрузку веб-страниц и предотвращают мерцание при зависании навигации.

Answer 7

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

Answer 8

Пока у вас есть что-то вроде PSD-файла с динамическим фотошопом, поддержка проектировщика не будет проблемой. Но если это статический файл, такой как PNG / GIF, то обслуживание займет больше времени, поскольку вы больше не можете управлять отдельными изображениями отдельно.