배경 이미지 데이터를 CSS에 Base64로 내장하는 것이 올바른 방법인가?

질문 : 배경 이미지 데이터를 CSS에 Base64로 삽입하는 것이 좋거나 나쁜 습관입니까?

---

greasemonkey 사용자 스크립트의 소스를보고 있었고 CSS에서 다음을 발견했습니다.

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

greasemonkey 스크립트는 서버에서 호스트하는 것과는 반대로 소스 내에서 할 수있는 모든 것을 번들로 묶고 싶어한다는 것을 알 수 있습니다. 하지만 이전에이 기술을 본 적이 없었기 때문에 사용을 고려했고 여러 가지 이유로 매력적으로 보입니다.

예를 들어 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를 참조 하고 명심하십시오- 실제 슬라이드

답변

---

이미지와 스타일 정보를 개별적으로 캐시하려는 경우에는 좋지 않습니다. 또한 큰 이미지 나 많은 수의 이미지를 css 파일로 인코딩하는 경우 다운로드가 완료 될 때까지 브라우저가 스타일 정보없이 사이트에서 파일을 다운로드하는 데 더 오래 걸립니다. 자주 변경하지 않으려는 작은 이미지의 경우 훌륭한 솔루션입니다.

base64 인코딩을 생성하는 한 :

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (업로드)
• http://www.greywyvern.com/code/php/binary2base64 (아래에 작은 튜토리얼이있는 링크에서)

출처 : https://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice