programing

Base64 이미지 임베딩

new-time 2020. 2. 9. 19:58
반응형

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
        • 입력 유형 = 이미지
        • 링크

    • background-image, background, list-style-type, list-style 등과 같은 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 인코딩 / 디코딩에 다음 도구를 사용하는 것이 좋습니다.

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


(

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

)를 사용 하면 IE에서 거의 문제가없는 주요 브라우저에서 지원을 표시 할 수 있습니까참고 URL :

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



도움이 되겠다면 ↓↓↓ 배너 한번만 클릭 해주시면 감사합니다 ^^

반응형