CSS повторяющийся фон, спрайт или 1px png

Question

Хорошо, я хочу знать, как лучше всего работать с фоновыми изображениями CSS и запросами http.

1. Используйте много разных фоновых изображений 1px png, что приводит к нескольким отдельным запросам http

OR

2. Используйте один большой спрайт изображения с большими блоками градиента для использования в качестве фонового изображения. Это увеличит размер файла, но сэкономит на запросах http.

Рад слышать ваше мнение ...

Answer 1

Я думаю, что было бы лучше использовать метод data: uri для небольших изображений (например, 1px-фонов).

background: url(data:image/png;base64,....) top left repeat-x;

Работает для всех современных браузеров. В старых браузерах IE (например, IE6, IE7) вы можете перезаписывать стили с помощью условных комментариев.

background: url("path/to/background.png") top left repeat-x;

Конечно, таким образом вы должны перекодировать фон, если он изменился. Но это экономит много запросов.

Answer 2

Если вы говорите об использовании этих изображений для градиентов, я бы предложил использовать CSS-градиенты, тогда вам вообще не понадобятся изображения.

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

Больше не требуется никаких изображений; простоодин файл HTC (который загружается только IE).

Answer 3

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

Посмотрите на следующий инструмент, который позволяет легко создавать спрайт-изображения из неподписанных изображений:

http://spriteme.org/