Лучше ли использовать изображения или CSS, чтобы максимально повысить производительность веб-страницы или приложения?

Question

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

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

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

Есть ли определенное правило относительно того, насколько большим должно быть изображение, чтобы оно было «худшим» вариантом из двух?

ОБНОВЛЕНИЕ: Поскольку несколько человек упомянули сложность градиента как фактор, я собираюсь представить его здесь:

-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));

Очень сложный! ; -)

Answer 1

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

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

Совместимость браузера также должна быть известна.Здесь изображения часто выигрывают у CSS, когда дело доходит до градиентов и тому подобного.

Какой-то очень сложный CSS3-сайт, чтобы продемонстрировать, что я имею в виду: http://lea.verou.me/css3patterns/ Это ОЧЕНЬ хороший пример, ноневероятно медленныйЛагает при загрузке.Еще больше запаздывает при прокрутке.И я уверен, что это намного медленнее, чем решение, использующее спрайт для всего этого.

Не обращайтесь со мной неправильно!Я люблю CSS, но изображения тоже хороши.Иногда даже лучше.

Резюме

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

Answer 2

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

ОДНАКО, сложный градиент вероятен там, где я бы уступил и добавил изображение.Недавно внедрив некоторые CSS-градиенты, сейчас это немного беспорядок.

В конце концов, Фабиан Барни имеет правильный ответ.Если это проблема производительности, вам нужно измерить вещи.В общей схеме, это, вероятно, мало вопросов о производительности, чтобы остановиться на.

Answer 3

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