Размер базового изображения CSS Sprite

Question

Имеет ли значение длина и ширина изображения при использовании CSS-спрайтов? Я заметил, что изображение спрайта SO - это одно длинное изображение со всеми спрайтами друг на друге.

Может ли спрайты, сгруппированные вместе, повысить производительность?

Answer 1

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

Незначительные затраты на размер файла при размещении спрайта по вертикали (например,Переполнение стека), в отличие от сжатия значков в идеальный квадрат, вероятно, стоит того, чтобы иметь чище CSS и более поддерживаемый спрайт .

Answer 2

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

Answer 3

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

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