이미지를 바이너리(base64)로 불러오기 (Data-URI)

0. Data-URI란?

RFC 2397에 정의되어 있으며 이미지 등의 외부 바이너리 파일을 웹페이지에 인라인으로 넣기 위해 사용.

바이너리 파일 : 컴퓨터 파일로 컴퓨터 저장과 처리 목적을 위해 이진 형식으로 인코딩된 데이터파일 ( 이미지를 메모장으로 열었을때 보임)

형식은 data:[<MIME-type>][;charset=<encoding>][;base64],<data> 이며 사용하는 방법은

1. html 에서는

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA” />

<img src ="Data-URI" /> 

실제 예 <사파리의 경우 아래 이미지에서 마우스우측 크릭하여소스보기하면 알 수 있음> 

2. Jupyter (.ipynb)등 마크다운 문서등을 작성할때

URL의 경우에는 

즉  와 같은 형태로 불러올 수 있고, 

Data-URI의 경우에는 


이때 base64, 뒷부분이 실제 바이너리데이터이다. 위의 예에서는 뒷부분을 생략하였다.

3. 이미지의 Data-URI 생성은 CSS Portal 에서 컴퓨터에 있는 이미지를 드래그&드롭하거나,

4. 웹상에 있는 이미지는 아래와 같이 얻을 수 있다.

4-1. Microsoft Edge 에서는 

하여 개발자도구를 불러오고

이미지를 데이터 URI로 복사하기를 선택한다음 ![]() 의 소괄호 사이에 붙여넣기하면 됩니다.

인터넷상의 이미지를 링크하였다가, 소스의 주소가 변경되는등의 경우를 대비할 수 있다. 물론 소스의 크기는 엄청나게 커지겠지요.

4-2. 구글의 크롬에서는 역시 개발자도구로 들어간후

4-3. 사파리에서는 아직 방법을 못찾음