Base64로 배경 이미지 데이터를 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을 하고 명심 - 실제 슬라이드

---

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

base64 인코딩을 생성하는 한 :

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

---

이 답변은 최신 정보가 아니므로 사용해서는 안됩니다.

1) 2017 년 모바일에서 평균 대기 시간이 훨씬 빨라졌습니다. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2) HTTP2 멀티 플렉스 https://http2.github.io/faq/#why-is-http2-multiplexed

모바일 사이트에는 "데이터 URI"를 반드시 고려해야합니다. 셀룰러 네트워크를 통한 HTTP 액세스는 요청 / 응답 당 대기 시간이 길어집니다. 따라서 이미지를 CSS 또는 HTML 템플릿으로 데이터로 잼하는 것이 모바일 웹 앱에서 유용 할 수있는 사용 사례가 있습니다. 사례별로 사용량을 측정해야합니다. 데이터 URI가 모바일 웹 앱의 어느 곳에서나 사용되어야한다고 주장하지 않습니다.

모바일 브라우저에는 캐시 할 수있는 파일의 총 크기에 제한이 있습니다. iOS 3.2의 한도는 꽤 낮았지만 (파일 당 25K) 최신 버전의 Mobile Safari에서는 더 커집니다 (100K). 따라서 데이터 URI를 포함 할 때 총 파일 크기를 주시하십시오.

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

---

해당 이미지를 한 번만 참조하면 CSS 파일에 이미지를 포함시키는 데 문제가 없습니다. 그러나 둘 이상의 이미지를 사용하거나 CSS에서 여러 번 이미지를 참조해야하는 경우 단일 이미지 맵을 사용하는 대신 단일 이미지를자를 수 있습니다 ( CSS Sprites 참조 ).

---

내가 제안하는 것 중 하나는 두 가지 별도의 스타일 시트를 갖는 것입니다. 하나는 일반 스타일 정의가 있고 다른 하나는 base64 인코딩으로 이미지를 포함합니다.

물론 이미지 스타일 시트 앞에 기본 스타일 시트를 포함시켜야합니다.

이 방법을 사용하면 일반 스타일 시트를 최대한 빨리 문서에 다운로드하여 적용 할 수 있지만 동시에 HTTP 요청 감소 및 기타 데이터 이점으로 인한 이익을 얻을 수 있습니다.

---

Base64는 GZipped 이후 이미지 크기에 약 10 %를 추가하지만 모바일에서 이점을 능가합니다. 반응 형 웹 디자인에는 전반적인 추세가 있으므로 적극 권장합니다.

또한 W3C는 모바일에이 접근 방식을 권장하며 레일에서 자산 파이프 라인을 사용하는 경우 이는 CSS 압축시 기본 기능입니다.

http://www.w3.org/TR/mwabp/#bp-conserve-css-images

---

비 편집 이미지에 대해 별도의 CSS 파일을 작성하라는 권장 사항에 동의하지 않습니다.

이미지가 UI 목적을위한 것으로 가정하면, 프리젠 테이션 레이어 스타일이며, 위에서 언급했듯이 모바일 UI를 수행하는 경우 모든 스타일을 단일 파일로 유지하여 한 번 캐시 할 수있는 것이 좋습니다.

---

필자의 경우 CSS 이미지가 이미 포함되어 있기 때문에 관련 이미지 복사에 대해 걱정할 필요없이 CSS 스타일 시트를 적용 할 수 있습니다.

---

CSS / HTML 분석기 도구의 온라인 개념을 만들려고했습니다.

http://www.motobit.com/util/base64/css-images-to-base64.asp

그것은 할 수 있습니다 :

• HTML / CSS 파일 다운로드 및 구문 분석, href / src / url 요소 추출
• URL에서 압축 (gzip) 및 크기 데이터 감지
• 원본 데이터 크기, base64 데이터 크기 및 gzipped base64 데이터 크기 비교
• URL (image, font, css, ...)을 base64 데이터 URI 체계로 변환하십시오.
• 데이터 URI로 절약 할 수있는 요청 수

의견 / 제안은 환영합니다.

안토닌

---

PHP로 인코딩 할 수 있습니다 :)

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

1 That’s sort of a “quick-n-dirty” technique but it works. Here is another encoding method using fopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

출처

---

Sublime Text 2 사용자를 위해 비트를 가져 와서 ST에 이미지를로드하는 base64 코드를 제공하는 플러그인이 있습니다.

Image2base64 호출 : https://github.com/tm-minty/sublime-text-2-image2base64

추신 : 플러그인에 의해 생성 된이 파일은 파일을 덮어 쓰거나 파괴하기 때문에 저장하지 마십시오.

---

여기에 정보를 주셔서 감사합니다. 이 포함이 유용하고 특히 특히 포함 된 이미지의 CSS 파일이 캐시되는 모바일에 유용합니다.

내 파일 편집기가 기본적으로 이것을 처리하지 않기 때문에 인생을 더 쉽게하기 위해 랩톱 / 데스크탑 편집 작업을위한 간단한 스크립트를 만들었습니다. 나는이 것들을 직접적이고 잘 처리하고 있기 때문에 PHP를 고수했습니다.

Windows 8.1에서 ---

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

... 관리자로서 경로에 배치 파일에 대한 바로 가기를 설정할 수 있습니다. 해당 배치 파일은 PHP (cli) 스크립트를 호출합니다.

그런 다음 파일 탐색기에서 이미지를 마우스 오른쪽 버튼으로 클릭하고 배치 파일로 보내기를 클릭하십시오.

Admiinstartor 요청을 확인하고 검은 색 명령 쉘 창이 닫힐 때까지 기다리십시오.

그런 다음 클립 보드의 결과를 텍스트 편집기에 붙여 넣기 만하면됩니다.

<img src="|">

또는

 `background-image : url("|")` 

다음은 다른 OS에 적합해야합니다.

배치 파일...

rem @echo 0ff
rem Puts 64 encoded version of a file on clipboard
php c:\utils\php\make64Encode.php %1

그리고 경로에 php.exe를 사용하면 PHP (cli) 스크립트를 호출합니다 ...

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// somewhat based on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>

---

내가 조사한 한

사용 : 1. svg 스프라이트를 사용하는 경우. 2. 이미지 크기가 더 작은 경우 (최대 200mb).

사용하지 마십시오 : 1. 이미지가 클 때. 2. svg와 같은 아이콘. 압축 후 이미 우수하고 gzip으로 압축되어 있습니다.

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