Base64 이미지 임베딩

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 기반
• KDE의 KIO 슬레이브 입출력 시스템을 통한 Konqueror
• 오페라 (Nintendo DSi 또는 Wii와 같은 장치 포함)
• Webkit뿐만 아니라 Safari (iOS 포함), Android 브라우저, Epiphany 및 Midori (WebKit은 Konqueror의 KHTML 엔진의 파생물이지만 Mac OS X은 KIO 아키텍처를 공유하지 않으므로 구현 방식이 다름)와 같은 WebKit 기반 / 크롬과 같은 크롬 기반
• 삼지창
  • Internet Explorer 8 : Microsoft는 웹 기반 전자 메일 클라이언트에서 사용하는 것과 같은 스크립트 필터로 데이터 URI에 포함 된 JavaScript를 해석 할 수 없다는 우려를 비롯하여 보안상의 이유로 탐색 할 수없는 특정 콘텐츠로의 지원을 제한했습니다. 버전 8 [3]에서 데이터 URI는 32 KiB보다 작아야합니다.
  • 데이터 URI는 다음 요소 및 / 또는 특성에 대해서만 지원됩니다 [4] :
    • 대상 (이미지 만)
    • img
    • 입력 유형 = 이미지
    • 링크
  • 배경 이미지, 배경, 목록 스타일 유형, 목록 스타일 등의 URL을 허용하는 CSS 선언
  • Internet Explorer 9 : Internet Explorer 9에는 32KiB 제한이 없으며 더 넓은 요소로 허용됩니다.
  • 월드 브라우저 : 데이터 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 인코딩 / 디코딩에 다음 도구를 사용하는 것이 좋습니다.

• Base64 형식으로 인코딩

• Base64 형식에서 디코딩

데이터 URL 형식을 지정하려면 "데이터 URL 형식"옵션을 선택하십시오.

( http://caniuse.com/#feat=datauri )를 사용 하면 IE에서 거의 문제가없는 주요 브라우저에서 지원을 표시 할 수 있습니까?