[ETC] DATA URL Scheme

브라우저에서 이미지를 표시하는 보편적인 경우는 아래와 같습니다.

<img src="/image/path/image.jpg" />

아시다시피 이는 해당 사이트의 서버 어딘가에 저장된 jpg 파일을 호출하는 방법입니다.

이 외에 이미지를 노출 할 수 있는 방법이 한 가지 더 있습니다.

명칭은 DATA URL Scheme 이라고 불리우며 표준 문법은 아래와 같습니다.

 

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data

mediatype := [ type "/" subtype ] *( ";" parameter )

data := *urlchar

parameter := attribute "=" value

 

해당 이미지를 base64 형태로 encoding 하여 노출하는 방법입니다.

기본적인 포맷은

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

입니다.

 

MIME-type 으로는 image/gif, image/jpeg, image/pjpeg, image/png, image/svg+xml, image/tiff, image/vnd.microsoft.icon 이 있으며

charset 은 대표적으로 utf-8 로 쓰이며

data 에는 base64 로 encoding 된 데이터가 들어가게 됩니다.

만약 MIME-type 생략 시 text/plain,charset=US-ASCII 가 기본값으로 들어가게 됩니다.

그리고 대표적인 브라우저인 Chrome, Opera, Safari, Firefox 는 base64 및 charset 이 모두 제공되는 경우

비표준 호출이 가능하지만 Internet Explorer 의 경우 charset 사양이 base64 토큰보다 먼저 나와야 합니다.

 

- 장점

    1. 이미지와 같은 외부 데이터를 별도의 파일로 두지 않고 하나의 HTML 로 관리할 수 있다.

    2. 1개의 파일이므로 HTTP 헤더정보나 TCP 패킷 크기가 맞지 않아서 발생하는 오버헤드가 발생하지 않는다.

    3. 동적 이미지 파일의 호출 리퀘스트가 줄어드므로 빠른 전송효과를 볼 수 있다.

 

- 단점

    1. HTML 파일이므로 캐쉬가 되지 않는다. (볼때마다 데이터 다운 변경 시 마다 다시 인코딩, 삽입 과정이 필요하다.)

    2. BASE64 로 인코딩함으로써 기존 데이터의 용량보다 1/3 배 증가한다.

    3. HTTP 헤더에서 이득을 보더라도 600 BYTE 가 넘어가는 이미지는 용량면에서 손해다.

    4. 특정 브라우저의 지원이 미미하다.

        - IE7 이하 버전은 지원하지 않으며 IE8 의 경우 데이터 전송량에 제한(32KB)이 있다. 이상의 버전에서는 무제한(4GB) 에 가깝게 풀렸다고 한다.)

        - IE8, IE9 에서 이미지에는 사용할 수 있지만 자바스크립트에서 생성된 파일 다운로드에는 사용 할 수 없다.

    5. 보안 소프트웨어가 컨텐츠를 필터링 하는 것을 어렵게 만든다.

 

- 특징

    1. 이미지 뿐만 아니라 동영상, TEXT, 플래시도 표현 가능.

    2. IFRAME 의 SRC 도 URI 로 표현 가능.

    3. window.open() 시에도 별도의 파일 없이 가능.

    4. 많은 수의 작은파일 전송하는 경우 효과를 볼 수 있다.

    5. TCP 연결이 필요한 경우 전송 속도가 저하된다. HTTP keep-alive 를 사용하면 개선 가능하지만 병목 현상이 완전히 완화되지는 않는다.

    6. 전자 메일 메시지 템플릿에 이미지가 첨부파일이 아닌 것 처럼 보일 수 있다.