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

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

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

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

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

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

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

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

Ответ 1

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

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

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

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

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

Резюме

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

Ответ 2

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

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

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

Ответ 3

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