Base64로 CSS에 배경 이미지 데이터를 포함하는 것이 좋은 관행입니까, 나쁜 관행입니까?

Base64로 CSS에 배경 이미지 데이터를 포함하는 것이 좋은 관행입니까, 나쁜 관행입니까?

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

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

저는 그리스 몽키 스크립트가 서버에서 호스팅하는 것이 아니라 소스 내에서 가능한 모든 것을 번들로 제공하기를 원한다는 것을 이해할 수 있습니다.그러나 이전에 이 기술을 본 적이 없기 때문에 사용을 고려했고 다음과 같은 여러 가지 이유로 매력적인 것 같습니다.

1. 페이지 로드 시 HTTP 요청의 양을 줄여 성능을 향상시킵니다.
2. CDN이 없는 경우 이미지와 함께 전송되는 쿠키를 통해 생성되는 트래픽 양을 줄일 수 있습니다.
3. CSS 파일을 캐시할 수 있습니다.
4. CSS 파일을 GZIP할 수 있습니다.

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

그렇다면, 이것은 좋은 관행입니까, 나쁜 관행입니까, 왜 당신은 그것을 사용하지 않습니까? 그리고 당신은 이미지를 인코딩하기 위해 어떤 도구를 사용할 것입니다.

업데이트 - 테스트 결과

• 이미지를 사용한 테스트: 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

좋아요, 하지만 작은 이미지에는 조금 덜 유용할 것 같아요.

한 바에 의 data의 강연 하기 위한 됩니다. Google에서는 Bryan McQuade와 ChromeDevSummit 2013에서 data:uris in CSS를 사용합니다.#perfmatters: Instant mobile web appshttp://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 (아래에 작은 튜토리얼이 있는 링크에서)

이 답변은 오래되어 사용할 수 없습니다.

평균 대기 시간은 2017년 모바일에서 훨씬 더 빠릅니다.https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

HTTP2 멀티플렉싱 https://http2.github.io/faq/ #wy-wy-wy-dumped2-dumped

모바일 사이트에 대해서는 "데이터 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 스프라이트 참조).

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

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

이렇게 하면 일반 스타일시트가 가능한 한 빨리 다운로드되고 문서에 적용되는 동시에 http-requests 감소 및 data-uris가 제공하는 기타 이점을 활용할 수 있습니다.

Base64는 GZipped 후 이미지 크기에 약 10%를 추가하지만 모바일의 이점을 능가합니다.반응형 웹 디자인으로 전반적인 트렌드가 있기 때문에 적극 추천합니다.

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

http://www.w3.org/TR/mwabp/ #bp-bp-bp-backet-backet-backets

편집이 아닌 이미지에 대해 별도의 CSS 파일을 생성하라는 권고에 동의하지 않습니다.

이미지가 UI를 위한 것이라고 가정하면 프레젠테이션 계층 스타일입니다. 위에서 언급한 것처럼 모바일 UI를 사용하는 경우 모든 스타일을 한 번 캐시할 수 있도록 단일 파일에 보관하는 것이 좋습니다.

제 경우에는 이미 내부에 내장되어 있기 때문에 관련 이미지를 복사할 걱정 없이 CSS 스타일시트를 적용할 수 있습니다.

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

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

가능성:

• HTML/CSS 파일 다운로드 및 구문 분석, href/src/url 요소 추출
• URL에서 압축(gzip) 및 크기 데이터 검색
• 원본 데이터 크기, base64 데이터 크기 및 gzip base64 데이터 크기 비교
• URL(이미지, 글꼴, 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

PS: 플러그인에서 생성된 이 파일은 파일을 덮어쓰고 삭제되므로 저장하지 마십시오.

여기에 정보를 주셔서 감사합니다.저는 이 임베딩이 특히 임베디드 이미지의 css 파일이 캐시되는 모바일에 유용하다고 생각합니다.

파일 편집기가 기본적으로 이 작업을 처리하지 않기 때문에 업무를 보다 쉽게 수행할 수 있도록 노트북/데스크톱 편집 작업을 위한 간단한 스크립트를 몇 개 만들었습니다. 다른 사용자가 사용할 수 있는 경우 여기서 공유하십시오.저는 php가 이러한 것들을 직접적이고 매우 잘 처리하고 있기 때문에 php를 고수했습니다.

Windows 8.1에서는 다음과 같이 말합니다.

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

관리자는 경로에 배치 파일에 대한 바로 가기를 설정할 수 있습니다.그 배치 파일은 php (cli) 스크립트를 호출할 것입니다.

그런 다음 파일 탐색기에서 이미지를 마우스 오른쪽 단추로 클릭하고 배치 파일로 보내기를 클릭할 수 있습니다.

관리 시작자 요청을 확인하고 검은색 명령 셸 창이 닫힐 때까지 기다립니다.

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

<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로 표시합니다.압축 후에 이미 잘되고 압축이 완료되었기 때문입니다.

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