Я смотрел на источник пользовательского скрипта greasemonkey и заметил следующее в их css:
.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}
Я могу оценить, что скрипт greasemonkey захочет объединить все, что может в исходном коде, а не размещать его на сервере, это достаточно очевидно. Но так как я не видел эту технику ранее, я рассмотрел ее использование, и она кажется привлекательной по ряду причин:
- Это уменьшит количество HTTP-запросов при загрузке страницы, что повысит производительность
- Если CDN отсутствует, это уменьшит объем трафика, генерируемого с помощью файлов cookie, отправляемых вместе с изображениями.
- CSS-файлы могут быть кэшированы
- CSS-файлы могут быть сжаты
Учитывая, что IE6 (например) имеет проблемы с кешем для фоновых изображений, кажется, что это не самая плохая идея ...
Итак, является ли это хорошей или плохой практикой, почему бы вам не использовать ее и какие инструменты вы бы использовали для кодирования изображений base64?
обновление - результаты тестирования
тестирование с изображением: http://fragged.org/dev/map-shot.jpg - 133,6 КБ
тестовый URL: http://fragged.org/dev/base64.html
выделенный файл CSS: http://fragged.org/dev/base64.css - 178.1Kb
GZIP-кодировка на стороне сервера
результирующий размер, отправленный клиенту (тест компонентов YSLOW): 59,3 КБ
Сохранение данных, отправленных клиентскому браузеру размером: 74,3 КБ
Хорошо, но это будет немного менее полезно для небольших изображений, я думаю.
ОБНОВЛЕНИЕ: Брайан МакКуэйд, инженер-программист из Google, работающий над PageSpeed, заявил на ChromeDevSummit 2013, что data: uris в CSS считается анти-паттерном, блокирующим рендеринг, для предоставления критического / минимального CSS во время своего выступления
#perfmatters: Instant mobile web apps
. Смотрите http://developer.chrome.com/devsummit/sessions и имейте это в виду - фактический слайд
PRO:
ограничений кеша для сотовых устройств ... CON:
некоторые изображения следует рассматривать как контент, а не как простую презентацию, и, следовательно, они лучше подходят для тегов HTML IMG, чем фоновые изображения CSS.