Существуют ли ограничения на высоту / ширину CSS Sprite-карт?

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

Существует ограничение в версии 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 байт.в размере!

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