CSS генерируемые значки против изображений

Question

Будет ли дизайн без изображения (с использованием CSS для создания значков) загружаться быстрее, чем традиционный дизайн на основе изображений?

ПРИМЕЧАНИЕ. Я полностью понимаю гибкость возможности изменять цвет, размер и т. Д. Значка.Несколько изменений в файле CSS намного эффективнее, но я не уверен насчет времени загрузки.

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

Спасибо!

Answer 1

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

Answer 2

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

В этом случае значок css3 не только сэкономит время и ширину полосы, но также уменьшит количество обращений к серверу, поскольку файл css загружается только один раз и содержит все объявления стилей для всего сайта.

Преимущества огромного выбора иконки CSS. Но в некоторых случаях значок css недостаточен, поэтому разработчик может выбрать значок css или изображение в соответствии с требованиями.

Answer 3

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