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

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

Одним из конкретных примеров является горизонтальная «полоса», которая проходит по всей ширине виджета. Он создал действительно шикарный градиент, который включает в себя несколько остановок разных цветов и непрозрачности, и он считает, что небольшой размер изображения предпочтительнее или, по крайней мере, сопоставим с добавленными строками кода 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)));

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