Исходный текст: CSS Sprite: делать или не делать?
В переводе: Спрайт или не спрайт
Отказ от ответственности: CSS-спрайты, упомянутые в этой статье, — это CSS-спрайты . У этой фразы никогда не было фиксированного или традиционного перевода на китайский язык. Некоторые люди начали называть ее CSS-спрайтами. Если вы считаете, что это неуместно. мы продолжим делать это в будущем. Будем по-прежнему называться CSS-спрайтами. —— Шэнфэй ( вокал )
CSS Sprite существует уже некоторое время и зарекомендовал себя как способ сделать ваш сайт быстрее. Стив Соудерс только что представил SpriteMe! на Velocity '09 (обсуждение: зачем использовать генератор спрайтов CSS или другой серверный инструмент, если вы можете использовать Canvas и toDataURL и генерировать спрайты на лету?). Однако относительно CSS-спрайтов существуют некоторые заблуждения, главное из которых заключается в том, что у них нет недостатков.
Основной принцип CSS Sprite — объединить несколько изображений, используемых на вашем веб-сайте, в одно изображение, тем самым уменьшая количество HTTP-запросов для вашего веб-сайта. Изображение визуализируется с использованием свойств CSS Background и Background-position (стоит отметить, что это также означает, что ваши теги становятся более сложными, изображение определяется в CSS, а не в теге <img>).
Самая большая проблема CSS Sprite — использование памяти. Если изображение спрайта не организовано очень тщательно, у вас останется много бесполезного пустого пространства . Мой любимый пример — с сайта WHIT TV, где это изображение используется в качестве спрайта. Обратите внимание, что это изображение PNG размером 1299×15 000 пикселей. Он также очень хорошо сжимается — реальный размер загрузки составляет всего около 26 КБ, — но браузер не отображает сжатые данные изображения. Когда этот образ будет загружен и распакован, он займет примерно 75 МБ памяти (1299*15000*4). Если в этом изображении не используется альфа-прозрачность, оно будет оптимизировано до 1299*15000*3, но за счет скорости рендеринга. Даже тогда мы говорим о 55 МБ. Большая часть этой картинки на самом деле пуста , там нет ничего, никакого полезного контента. Простая загрузка домашней страницы WHIT приведет к увеличению использования памяти вашего браузера как минимум до 75+ МБ только из-за этого одного изображения. ( PS: К сожалению, сайт недавно был обновлен, и изображения, упомянутые в статье, больше не существуют )
Правильный компромисс в пользу веб-сайта не существует.
Другой (хотя и не столь важный) недостаток заключается в том, что если страница, использующая CSS Sprite, масштабируется с использованием функции полностраничного масштабирования, предоставляемой некоторыми браузерами, браузеру придется проделать некоторую дополнительную работу, чтобы исправить поведение этих краев изображения - в основном. , это необходимо для предотвращения «экспонирования» соседних изображений в Sprite. Это не проблема для маленьких изображений, но приведет к снижению производительности для больших изображений.
Конечно, есть несколько примеров, демонстрирующих явные преимущества CSS-спрайтов, главный из которых — объединение пакета изображений одинакового размера в один файл. Например, серия значков 16×16, используемых для обозначения многих элементов на вашем сайте, или несколько значков 32×32, используемых в качестве заголовков категорий, или что-то в этом роде. Но объединять изображения сильно разных размеров — не лучшая идея, особенно высокое и тонкое изображение рядом с широким и коротким изображением.
Тем не менее, CSS Sprite улучшает время загрузки страницы (по крайней мере, при начальной загрузке страницы — при последующих загрузках страницы браузер кэширует изображение). Есть ли что-нибудь, что можно заменить? К сожалению, альтернативы пока нет. Многие браузеры начинают поддерживать автономные манифесты, и, возможно, их можно будет расширить, чтобы разрешить загрузку файла (например, jar/zip-файла), содержащего список ресурсов и соответствующие URL-адреса. Но такого подхода какое-то время не будет…
Итак, принимая решение об использовании CSS Sprite, имейте в виду, что помимо начальной производительности загрузки страницы существует множество факторов. Как правило, если большая часть вашего CSS-спрайта не содержит фактического содержимого изображения, вам следует избегать его использования соответствующим образом. Аналогичным образом, следите за возможными проблемами в будущем, сохраняя при этом скорость загрузки страниц и стараясь избежать ошибок памяти и влияния на производительность Sprite.
Другие недостатки CSS Sprite
Ниже приведены некоторые недостатки CSS Sprite, упомянутые некоторыми пользователями сети в комментариях к этой статье:
Если вы обнаружите какие-либо недостатки в других CSS-спрайтах во время использования, не стесняйтесь упомянуть о них.