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

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

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

Основная причина этого вопроса - споры о том, размещать ли изображения спрайтов в сетке или в одной строке / столбце. Например: нужно или полезно делать 4000 x 3000 вместо 400 x 30000?

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


browser image css css-sprites
person Jeffrey Blake    schedule 26.08.2011    source источник
comment
Нет никаких произвольных ограничений на размер изображения, о которых я знаю, но примите во внимание требования к памяти для хранения изображения Truecolor 4000x3000 в памяти: ~ 48 мегабайт при условии 32-битного + альфа-изображения.   -  person Marc B    schedule 27.08.2011
comment
Просто ради любопытства, спрайт, используемый в addons.mozilla.net, имеет размер 1000x2150 пикселей и, похоже, не вызывает никаких проблем. Однако это всего лишь 16,7кб! спрайт   -  person MartinodF    schedule 27.08.2011
comment
@Marc: Я знаю о памяти. Это было темой ответа, на который я дал ссылку.   -  person Jeffrey Blake    schedule 29.08.2011
comment
@Martino: Размер файла и требования к памяти для спрайтов очень разные. Как только браузер загружает изображение в память, все преимущества сжатия теряются, поэтому конечные требования к памяти в браузере обычно намного превышают размер файла. Это верно практически для всех изображений, а не только для спрайтов.   -  person Jeffrey Blake    schedule 29.08.2011
comment
@ Джеффри, я это прекрасно знаю, и мой комментарий не был прямым ответом Марку. Я рассматривал время загрузки, которое, IMHO, не менее важно, чем объем памяти.   -  person MartinodF    schedule 30.08.2011

Ответы (3)


arrow_upward
4
arrow_downward

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

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

Direct-X 9 имеет ограничение на размер 4096 пикселей, поэтому любые фильтры Internet Explorer, примененные к этим элементам, обрезают их до 4096 пикселей.

См. Ошибка прозрачности отображения IE на высоте ›4096 пикселей?

person Diodeus - James MacFarlane    schedule 29.08.2011
comment
Время загрузки изображения спрайта не является проблемой (и при необходимости будет рассмотрено отдельно). Меня беспокоила возможность возникновения проблем, непосредственно связанных с тем, что браузеры не могут обрабатывать большие изображения в спрайты. - person Jeffrey Blake; 31.08.2011
comment
Фильтры IE6 / 7 direct-x не позволяют изображениям размером более 4096 пикселей (2 ^ 12). Он использует регистр размером 12 бит. - person Diodeus - James MacFarlane; 31.08.2011
comment
Есть ли у вас источник на эту тему и / или лучшее описание того, что именно означает «дерьмо с фильтрами»? Эти два компонента, помещенные в ответ, вероятно, создадут принятый ответ. - person Jeffrey Blake; 31.08.2011
comment
Вот источник: stackoverflow.com / questions / 775041 / - person Diodeus - James MacFarlane; 31.08.2011
comment
+1 и принято. Я считаю, что все должно работать во всех современных браузерах, но неясно, будет ли IE6 / 7 правильно обрабатывать спрайт для изображений размером более 4096 пикселей. - person Jeffrey Blake; 31.08.2011

arrow_upward
2
arrow_downward

На практике это похоже, работает без проблем в Firefox 5+, Chrome и IE7 + для изображения спрайта 400x16560.

Потенциальные проблемы, связанные с отказом механизма рендеринга IE Directx для изображений размером более 4096 пикселей, не создают проблем в IE7 или более поздних версиях; у нас нет метода или необходимости тестировать IE6 для нашего текущего проекта.

Единственное место, где мы столкнулись с проблемами с действительно большими спрайт-картами, - это мобильные платформы. Устройства Android справляются с ними достаточно хорошо, но устройства iOS выходят из строя довольно сильно и странным образом: они сжимают изображение, чтобы оно соответствовало допустимым размерам. Таким образом, наш CSS отлично работает для небольшой карты спрайтов, но без каких-либо изменений, за исключением увеличения физических размеров изображения карты спрайтов, спрайт-изображения начинают отображать в четыре раза больше карты спрайтов в том же html-объекте с точно таким же CSS.

person Jeffrey Blake    schedule 31.08.2011

arrow_upward
0
arrow_downward

В версии 1.0 есть ограничение, которое обновлено в v1.1, но все же есть ограничение на размеры:

In accord with version 1.1, the scope of the 31-bit limit on chunk

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

Источник

Забавный предел - IE6.0 не может отображать изображения PNG размером 4097 или 4098 байт!

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

person Mohsen    schedule 26.08.2011
comment
IE6 использует дрянную реализацию direct-x для изображений. Он использует 12-битный регистр для измерений (2 ^ 12 = 4906). - person Diodeus - James MacFarlane; 29.08.2011