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

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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

Ответ 3

В версии 1.0 есть предел, который обновлен в версии 1.1. Но все же существует предел для размеров:

In accord with version 1.1, the scope of the 31-bit limit on chunk
длины и размеры изображения были расширены для применения ко всем четырехбайтовые целые числа без знака. Значение -231 не разрешено в подписанных целые числа.

Источник

Смешное ограничение - IE6.0 не отображает изображения PNG размером 4097 или 4098 байт!

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