베이스 64 이미지 임베딩

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

  •  05-07-2019
  •  | 
  •  

문제

순전히 호기심으로 인해 Base64 이미지 임베딩은 어떤 브라우저에서 작동합니까? 내가 말하는 것은 이것.

나는 그것이 대부분의 것들에 대한 좋은 해결책이 아니라는 것을 알고 있습니다. 페이지 크기가 상당히 증가하기 때문에 나는 궁금합니다.

몇 가지 예 :

HTML :

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS :

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
도움이 되었습니까?

해결책

업데이트 : 2017-01-10

데이터 URI는 이제 모든 주요 브라우저에서 지원됩니다. IE는 버전 8 이후 이미지 임베딩을 지원합니다.

http://caniuse.com/#feat=datauri

데이터 URI는 이제 다음 웹 브라우저에서 지원됩니다.

  • Firefox, Seamonkey, Xerobank, Camino, Fennec 및 K-Meleon과 같은 Gecko 기반
  • Konqueror, KDE의 Kio Slaves 입력/출력 시스템을 통해
  • 오페라 (Nintendo DSI 또는 Wii와 같은 장치 포함)
  • Safari (iOS 포함), Android의 브라우저, 주현절 및 Midori와 같은 WebKit 기반 (WebKit은 Konqueror의 KHTML 엔진의 파생물이지만 Mac OS X는 Kio 아키텍처를 공유하지 않으므로 구현이 다릅니다), WebKit. 크롬과 같은 /크롬 기반
  • 삼지창
    • Internet Explorer 8 : Microsoft는 데이터에 포함 된 JavaScript가 웹 기반 이메일 클라이언트에서 사용하는 스크립트 필터에서 해석 할 수 없다는 문제를 포함하여 보안상의 이유에 대한 특정 "사용 불가능한"컨텐츠에 대한 지원을 제한했습니다. 데이터 URI는 버전 8에서 32 kib보다 작아야합니다 [3].
    • 데이터 URI는 다음 요소 및/또는 속성에 대해서만 지원됩니다 [4] :
      • 객체 (이미지 만)
      • IMG
      • 입력 유형 = 이미지
      • 링크
    • 배경 이미지, 배경, 목록 스타일 유형, 목록 스타일 및 이와 같은 URL을 수락하는 CSS 선언.
    • Internet Explorer 9 : Internet Explorer 9에는 32kib 제한이 없으며 더 넓은 요소로 허용됩니다.
    • TheWorld 브라우저 : 데이터 URI 체계를 지원하는 IE 쉘 브라우저

http://en.wikipedia.org/wiki/data_uri_scheme#web_browser_support

다른 팁

Chrome, Mozilla 및 Internet Explorer와 같은 대부분의 최신 데스크톱 브라우저는 데이터 URL로 인코딩 된 이미지를 지원합니다. 그러나 일부 모바일 브라우저에 데이터 URL을 표시하는 데 문제가 있습니다. Android Stock Browser 및 Dolphin Browser는 표시되지 않습니다. 내장 JPEG.

온라인 Base64 인코딩/디코딩에 다음 도구를 사용하도록 권장합니다.

"형식으로 데이터 URL"옵션을 확인하여 데이터 URL로 형식을 확인하십시오.

사용해도 되나요 (http://caniuse.com/#feat=datauri) IE에 문제가 거의없는 주요 브라우저의 지원을 보여줍니다.

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