[css] Base64로 배경 이미지 데이터를 CSS에 포함시키는 것이 좋거나 나쁜 습관입니까?

나는 그리스 몽키 사용자 스크립트의 출처를보고 있었고 CSS에서 다음을 발견했습니다.

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

greasemonkey 스크립트는 서버에서 호스팅하는 대신 소스 내에 가능한 모든 것을 번들로 제공하고 싶다는 것을 이해할 수 있습니다. 그러나 이전 에이 기술을 보지 못했기 때문에 그 사용을 고려했으며 여러 가지 이유로 매력적입니다.

1. 페이지로드시 HTTP 요청의 양이 줄어들어 성능이 향상됩니다.
2. CDN이 없으면 이미지와 함께 전송되는 쿠키를 통해 생성되는 트래픽 양이 줄어 듭니다.
3. CSS 파일을 캐시 할 수 있습니다
4. CSS 파일은 GZIPPED 일 수 있습니다

IE6 (예 :)에 배경 이미지 캐시에 문제가 있다고 생각하면 최악의 생각이 아닌 것 같습니다 …

그렇다면 이것이 좋은 습관인지 나쁜 습관입니까? 왜 그것을 사용하지 않습니까? 이미지를 base64로 인코딩하는 데 어떤 도구를 사용 하시겠습니까?

업데이트-테스트 결과

• 이미지 테스트 : http://fragged.org/dev/map-shot.jpg – 133.6Kb을

• 테스트 URL : http://fragged.org/dev/base64.html

• 전용 CSS 파일 :
  http://fragged.org/dev/base64.css –
  178.1Kb

• GZIP 인코딩 서버 측

• 클라이언트에 전송 된 결과 크기 (YSLOW 구성 요소 테스트) : 59.3Kb

• 클라이언트 브라우저로 전송 된 데이터 저장 : 74.3Kb

멋지지만 작은 이미지에는 약간 유용하지 않습니다.

업데이트 : Google의 소프트웨어 엔지니어 인 Bryan McQuade는 PageSpeed에서 일하면서 ChromeDevSummit 2013에서 표현한 CSS의 data : uris는 대화 중 중요 / 최소 CSS를 전달하기위한 렌더 차단 반 패턴으로 간주됩니다 #perfmatters: Instant mobile web apps. 참조 http://developer.chrome.com/devsummit/sessions을 하고 명심 – 실제 슬라이드

답변