데이터 URI 스킴

1 개요

data URI scheme

데이터 URI 스킴

• 외부 데이터 없이 웹페이지에 데이터를 넣기 위한 URI 스킴
• 일반적으로 이미지 데이터는 HTML과 CSS에서 외부링크로 작성하고 브라우저에 표시할 때는 여러 개의 HTTP요청이 발생하는데, 이미지가 작을 경우 비효율적일 수 있음
• 데이터 URI 스킴을 이용하면 내부 데이터로 이미지를 포함시킬 수 있으로 HTTP 요청 1개로 끝나서 효율적임
• 대부분의 웹브라우저에서 이것을 지원함

특히 완벽히 지원하는 브라우저는 JavaScript로 생성한 콘텐츠도 window.location.href에 값을 설정하여 일반 외부파일처럼 다운로드 가능

2 예시: png

data:image/png 문서를 참고하십시오.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

3 예시: svg

data:image/svg 문서를 참고하십시오.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>" alt="hamburger" />

4 같이 보기

• 데이터URI data:image/png
• 데이터URI data:image/svg
• Base64 인코딩/디코딩
• atob()
• btoa()
• CSS url()
• URI 스킴

5 참고

• https://en.wikipedia.org/wiki/Data_URI_scheme
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
• RFC 2397