데이타 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 처럼 웹에서 간편하게 사용할 수 있는 서비스들도 많습니다.

<img src="data:image/png;base64,
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" alt="Hyeonseok.com" />

위의 코드를 HTML 파일에 넣거나 src의 값을 브라우저의 주소창에 입력해보면 이미지 파일 없이 이미지가 표현되는 것을 확인할 수 있습니다. 이렇게 하면 이미지와 같은 외부 데이터를 별도의 파일로 두지 않고 하나의 HTML 파일로 관리할 수 있습니다. 파일이 하나이다보니 HTTP 헤더정보나 TCP 패킷 크기가 맞지 않아서 발생하는 오버헤드가 발생하지 않습니다. 결과적으로 리퀘스트 수를 줄여서 빠른 전송효과를 볼 수 있습니다.

단점도 많습니다. HTML 파일에 포함되다보니 캐시가 되지 않습니다. 그리고 데이터가 base-64로 인코딩되면서 크기가 1/3 정도 증가하게됩니다. HTTP 헤더에서 이득을 볼 수 있다고 하더라도 600바이트가 넘어가는 이미지는 용량면에서 손해입니다. 그리고 대부분의 브라우저가 현재 데이타 URI를 지원하지만 IE7 이하버전은 지원하지 않습니다. 또한 IE8도 32KiB 이상의 데이터는 지원하지 않고 몇몇 제약이 있습니다.

데이타 URI는 이미지 뿐만 아니라 동영상, 플래시와 같은 데이터들도 표현할 수 있고 HTML이나 TXT 파일도 표현할 수 있습니다. iframe의 src도 데이타 URI로 표현이 가능합니다. window.open()으로 팝업을 열 때에도 별도의 파일 없이 팝업을 사용할 수 있습니다.

장단점을 종합해보면 사용할 수 있는 환경이 아주 많지는 않지만 경우에 따라서는 아주 유용할 수도 있는 기술 같습니다. IE에서 지원이 안되기 때문에 일반적인 웹페이지에서는 사용하기가 힘들지만 특정환경에서 사용하는 웹페이지들이나 사용자 브라우저를 어느정도 제한할 수 있는 상황에서는 유용할 것 같습니다. 이메일같이 별도의 이미지 서버가 필요한 경우도 이 데이터 URI를 사용하면 서버가 필요 없습니다. 다만 이메일 클라이언트가 매우 다양하기 때문에 이미지가 나오지 않을 수도 있다는 것을 유념할 필요는 있어보입니다. 특히나 작은 아이콘이 아주 많을 경우에 아주 유용하게 사용할 수 있을 것 같습니다.