Является ли встраивание данных фонового изображения в CSS как Base64 хорошей или плохой практикой?
Я смотрел на источник пользовательского скрипта 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