Base64로 배경 이미지 데이터를 CSS에 삽입하는 것이 좋은가요, 나쁜가요?

StackOverflow https://stackoverflow.com/questions/1124149

문제

나는 Greasemonkey 사용자 스크립트의 소스를 보고 있었고 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 파일은 GZIPP 방식으로 압축할 수 있습니다.

예를 들어 IE6의 배경 이미지 캐시에 문제가 있다는 점을 고려하면 이것이 최악의 아이디어는 아닌 것 같습니다.

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

업데이트 - 테스트 결과

좋지만 작은 이미지에는 약간 덜 유용할 것 같습니다.

업데이트:PageSpeed ​​작업을 하고 있는 Google의 소프트웨어 엔지니어인 Bryan McQuade는 ChromeDevSummit 2013에서 CSS의 data:uris가 강연 중에 중요/최소 CSS를 제공하기 위한 렌더링 차단 방지 패턴으로 간주된다고 표현했습니다. #perfmatters: Instant mobile web apps.보다 http://developer.chrome.com/devsummit/sessions 그리고 그것을 명심하세요 - 실제 슬라이드

도움이 되었습니까?

해결책

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

base64 인코딩을 생성하는 한:

다른 팁

이 답변은 오래되었으므로 사용해서는 안됩니다.

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 스프라이트).

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

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

이렇게 하면 일반 스타일시트가 가능한 한 빨리 다운로드되어 문서에 적용되는 동시에 http 요청이 줄어들고 data-uris가 제공하는 기타 이점을 얻을 수 있습니다.

Base64는 GZipped 이후 이미지 크기에 약 10%를 추가하지만 모바일의 경우 이점보다 더 큽니다.반응형 웹 디자인은 전반적인 트렌드가 있기 때문에 적극 추천드립니다.

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

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

나는 편집용이 아닌 이미지에 대해 별도의 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 데이터 크기 및 gzipped 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

추신:플러그인에 의해 생성된 이 파일은 파일을 덮어쓰고 파괴될 수 있으므로 절대 저장하지 마십시오.

여기에 정보를 제공해 주셔서 감사합니다.나는 이 삽입이 유용하고 특히 삽입된 이미지의 CSS 파일이 캐시되는 모바일에 유용하다고 생각합니다.

내 파일 편집기가 기본적으로 이 작업을 처리하지 않기 때문에 삶을 더 쉽게 만들기 위해 랩톱/데스크톱 편집 작업을 위한 몇 가지 간단한 스크립트를 만들었습니다. 다른 사람이 사용할 수 있는 경우를 대비해 여기에서 공유하세요.나는 이러한 것들을 직접적으로 매우 잘 처리하기 때문에 PHP를 고수했습니다.

Windows 8.1에서는 --- 

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

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

그런 다음 파일 탐색기에서 이미지를 마우스 오른쪽 버튼으로 클릭하고 배치 파일을 SendTo로 보낼 수 있습니다.

Ok 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으로 압축되어 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top