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

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

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

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

16
Jeffrey Blake 27 Авг 2011 в 02:02

3 ответа

Лучший ответ

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

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

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

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

4
Community 23 Май 2017 в 12:31

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

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

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

2
Jeffrey Blake 2 Дек 2011 в 15:03

В версии 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 байт!

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

0
Mohsen 26 Авг 2011 в 22:37