Programing

Base64 이미지 포함

lottogame 2020. 10. 4. 10:15
반응형

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
  • Opera (Nintendo DSi 또는 Wii와 같은 장치 포함)
  • Safari (iOS 포함), Android 브라우저, Epiphany 및 Midori (WebKit는 Konqueror의 KHTML 엔진의 파생물이지만 Mac OS X는 KIO 아키텍처를 공유하지 않으므로 구현이 다릅니다), Webkit과 같은 WebKit 기반 / Chrome 기반 (예 : Chrome)
  • 삼지창
    • Internet Explorer 8 : Microsoft는 데이터 URI에 포함 된 JavaScript가 웹 기반 전자 메일 클라이언트에서 사용되는 것과 같은 스크립트 필터로 해석되지 않을 수 있다는 우려를 포함하여 보안상의 이유로 특정 "탐색 할 수없는"콘텐츠에 대한 지원을 제한했습니다. 데이터 URI는 버전 8 [3]에서 32KiB보다 작아야합니다.
    • 데이터 URI는 다음 요소 및 / 또는 속성에 대해서만 지원됩니다 [4] :
      • 개체 (이미지 만)
      • img
      • 입력 유형 = 이미지
      • 링크
    • background-image, background, list-style-type, list-style 등과 같은 URL을 허용하는 CSS 선언.
    • Internet Explorer 9 : Internet Explorer 9에는 32KiB 제한이 없으며 더 넓은 요소에서 허용됩니다.
    • TheWorld Browser : 데이터 URI 체계를 기본적으로 지원하는 IE 셸 브라우저

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support


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

온라인 base64 인코딩 / 디코딩을 위해 다음 도구를 사용하는 것이 좋습니다.

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


Can I use ( http://caniuse.com/#feat=datauri )는 IE에서 거의 문제가없는 주요 브라우저에서 지원을 보여줍니다.

참고 URL : https://stackoverflow.com/questions/1207190/embedding-base64-images

반응형