Я смотрел на источник пользовательского скрипта greasemonkey и заметил следующее в их css:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

Я могу оценить, что сценарий greasemonkey хотел бы связать все, что он может в исходном коде, а не размещать его на сервере, что достаточно очевидно. Но так как я не видел эту технику ранее, я рассмотрел ее использование, и она кажется привлекательной по ряду причин:

It will reduce the amount of HTTP requests on page load, thus enhancing performance If no CDN, then it will reduce the amount of traffic generated through cookies being sent alongside of images CSS files can be cached CSS files can be GZIPPED

Учитывая, что IE6 (например) имеет проблемы с кешем для фоновых изображений, похоже, что это не самая плохая идея ...

Итак, является ли это хорошей или плохой практикой, почему вы используете ее и какие инструменты вы бы использовали для кодирования изображений base64?

update - results of testing

testing with image: http://fragged.org/dev/map-shot.jpg - 133.6Kb

test URL: http://fragged.org/dev/base64.html

dedicated CSS file: http://fragged.org/dev/base64.css - 178.1Kb

GZIP encoding server side

resulting size sent to client (YSLOW components test): 59.3Kb

Saving of data sent to client browser of: 74.3Kb

Хорошо, но это будет немного менее полезно для небольших изображений, я думаю.

UPDATE: Bryan McQuade, a software engineer at Google, working on PageSpeed, expressed at ChromeDevSummit 2013 that data:uris in CSS is considered a render-blocking anti-pattern for delivering critical/minimal CSS during his talk #perfmatters: Instant mobile web apps. See http://developer.chrome.com/devsummit/sessions and keep that in mind - actual slide