Исходный текст: 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 размером 129915 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 Sprite, не могут быть напечатаны, если RichB специально не добавил оператор печати в @media.
Если вы хотите изменить изображение в Sprite, вам придется изменить всю картинку, что, несомненно, увеличит рабочую нагрузку Тома Б.
Если вы обнаружите какие-либо недостатки в других CSS-спрайтах во время использования, не стесняйтесь упомянуть о них.