아카이빙: https://hyeonseok.com/soojung/webstandards/2011/02/17/641.html

Data URI 스킴

데이타 URI 스킴(data URI scheme)은 이미지와 같은 외부 데이터를 URI로 표현하는 방법입니다. 데이타 URI 스킴은 RFC 2397에 정의되어 있습니다.

<img src="http://hyeonseok.com/hyeonseok.png" alt="Hyeonseok.com" />

보통 HTML에서 이미지를 표현할 때에는 img 요소의 src 속성의 값으로 이미지의 경로를 입력하지만 데이타 URI 스킴을 사용하면 src 속성의 값으로 base-64로 인코딩된 이미지 데이터를 직접 입력할 수 있습니다. base-64로 변경하는 방법은 거의 대부분의 언어에서 지원하고 있고 Data URI Converter 처럼 웹에서 간편하게 사용할 수 있는 서비스들도 많습니다.

Data-uri는 이미지 뿐만 아니라 동영상, 플래시와 같은 데이터들의 표현도 가능하고 HTML, TXT 파일도 표현할 수 있다. iframe의 src도 Data-uri로 표현이 가능하다.

장점

• 이미지와 같은 외부 데이터를 별도의 파일로 두지 않고 하나의 HTML 파일로 관리가 가능하다.
• 파일이 하나이다 보니 HTTP 헤더 정보나 TCP 패킷 크기가 맞지 않아서 발생하는 오버헤드가 발생하지 않는다.
• 결과적으로 리퀘스트 수를 줄여서 좀 더 빠른 전송효과를 볼 수 있다.
• 작은 아이콘이 아주 많을 경우에 아주 유용하게 사용할 수 있다.

단점

• HTML 파일에 포함되다 보니 캐시가 되지 않는다.
• 데이터의 크기가 1/3 정도 증가한다.
• http 헤더에서 이득을 볼 수 있어도 600바이트가 넘어가는 이미지는 용량면에서 손해다.
• IE7 이하버전은 Data-uri를 지원하지 않는다.
• IE8도 32kib 이상의 데이터는 지원하지 않는다.