Поддержка CSS Sprites

Ответ 1

на более медленных машинах, оборудованных более старыми браузерами (например, IE6/IE7), вы можете заметить значительное снижение производительности при многократном использовании очень больших изображений на одной странице. Это еще более тяжело, когда вы используете спрайты для состояний зависания.

Вам нужно смягчить соблазн, чтобы подтолкнуть всех ваших спрайтов к одному огромному изображению - подумайте, какие элементы являются частью интерфейса веб-сайта/webapp и помещают их в один спрайт файл (они будут отображаться все время во время просмотра), Затем попробуйте сгруппировать остальные спрайты в изображения, соответствующие конкретным разделам сайта, и использовать их по мере необходимости. Нижняя сторона - это немного расширенное время загрузки (дополнительные HTTP-запросы), но пользовательский интерфейс во время просмотра/прокрутки страницы будет намного выше.

Ответ 2

Вам нужно сбалансировать вещи. Если вы говорите об изображении, который будет включать в себя 1000 спрайтов, тогда CSS будет огромным. Кроме того, есть очень тонкая вероятность, что вы все равно будете использовать все спрайты на одной странице.

Ответ 3

Как мы можем судить по нашему опыту YouTube, нет большой проблемы с этим.

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

Ответ 4

Вы можете сэкономить значительное количество HTTP-запросов, объединив ваши изображения в один или несколько составных спрайтов и используя CSS для выборочного отображения частей спрайта на своей веб-странице. Теперь, когда основные браузеры достаточно развиты для поддержки фонов и позиционирования CSS, многие сайты используют эту технику производительности. На самом деле, некоторые из самых загруженных сайтов в Интернете используют CSS спрайты для сохранения запросов HTTP.

С миллионами пользователей Yahoo! и AOL делают все возможное, чтобы улучшить работу пользователя. Оба AOL.com и Yahoo.com используют спрайты CSS для сохранения многочисленных HTTP-запросов для их сложных интерфейсов. Оба сайта используют CSS спрайты для выборочного отображения значков в своих каталогах сервисов и Yahoo! использует спрайты и в других местах.

Еще одно преимущество CSS-спрайтов заключается в том, что комбинированное изображение часто меньше размера файла, чем отдельные изображения, несмотря на добавление пробелов между изображениями. Меньший размер спрайтов объясняется уменьшением накладных расходов нескольких таблиц цветов и информацией о форматировании, требуемой отдельными изображениями. Чтобы максимизировать доступность и удобство использования, спрайты CSS лучше всего использовать для значков или декоративных эффектов.