[HTTP기초] 2. Data URI이란? - html에 데이터를 쉽게 첨부하는 방법!

 

 

앞선 글에서 URI에 대해 알아보았다. URI의 필수 구성 요소중 하나인 스키마 (http,https..etc)는 다양한 종류가 있는데, 이번 장에서는 그 중 data 스키마와 관련된 URI인 Data URI를 알아보고자 한다!

 

1. Data URI이란?

data: 스키마가 붙은 URL은 데이터를 문서 내에 포함시키는 방법을 제공하는 URI 스키마이다. 보통 HTML이나 CSS에 이미지를 넣기 위해 사용된다. 

<!-- 이런 구성을 지녔다 -->
data:[<mediatype>][;base64],<data>

<!-- 실제로 사용할 때는 이런 느낌이다 -->
<!-- html -->
<img src="data:image/jpeg;base64,%432DFSLK0B..." />

<!-- css -->
body {
    background-image url('data:image/png;base64,DJWJRn%26wjW...');
}

 

---

2. 왜 Data URI를 사용할까? 

보통 이미지같은 asset은 로컬 디렉토리에 넣어놓고 경로로 접근해서 사용하는게 일반적이다.

<img src="assets/image.jpeg"/>

그런데 왜 Data URI라는게 있는건가? 하는 의문이 들었다.

이미지 파일을 Data URL이라는 특별한 포맷으로 바꾸게 되면 이미지를 첨부하기 위해 해당 이미지의 경로를 "참조"하지 않고도

바로 이미지를 보여줄 수 있다.  무슨 뜻이냐 하면, 위의 예시처럼 image.jpeg는 asstes라는 폴더 안에 들어있다는 것을 브라우저가 "참조"해서,  필요할 때 request를 해서 불러온다. 그러나 Data URL은 이 자체만으로도 이미지를 직접 보여줄 수 있고, 브라우저는 이미지를 받아오기 위한 별도의 요청을 보내지 않아도 된다.

---

2. Data URI은 어떻게 사용할까?

data:[<mediatype>][;base64],<data>

Data URL은 위의 구성을 가지고 있다. 하나씩 살펴보자!

 

1. mediatype : 데이터의 타입을 가리키는 MIME타입이다. 해당 Data URL이 어떤 타입의 데이터를 표시하는지를 명시한다.

JPEG 이미지의 경우, image/jpeg 이고, 만약 mediatype을 생략한다면 기본 값으로 text/plain;carset=US-ASCII 가 사용된다.

단순한 텍스트를 표기할 것이라면, base64 데이터로 인코딩 할 필요 없이 단순한 텍스트 + 이스케이프로 이루어진 텍스트를 작성하면 된다. 아래 예시처럼!

<!-- 아래의 URL을 브라우저 주소 창에 작성하고 엔터를 누르면 화면에 Hello, World!가 나와요! -->
<!-- 주의사항 : 공백, 슬래시 등 URL이라는 문맥에서 특별한 의미를 지니는 문자는 퍼센트 인코딩으로 대체해줘야 합니다 -->

data:,Hello%2C%20World!

<!-- 위와 같은 내용을 base64로 작성한 예시 -->
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

위 예시에서 보듯 MIME타입이 끝나는 자리에 세미콜론(;)을 붙여주고, 데이터가 시작되기 전 자리에는 쉼표(,)를 붙여주어야 한다.

다양한 MIME타입에 대해서는 이곳을 참조하시면 좋아요!

2. base64 : 뒤에 올 데이터가 base64포맷이라면 base64라고 명시해준다. 아니라면 생략

3. data : 데이터가 들어가는 자리로, text라면 text, base64 포맷의 데이터 문자열이라면 그것을 넣어주면 된다. (js코드도 넣을 수 있다!)

data:text/html,<script>alert('hi');</script>

 

이제 개발자처럼 내 로컬에 있는 파일을 base64로 변환하는 방법을 알아보자! 명령어는 아래와 같다. 터미널에 아래 명령어를 작성해보자. infile 자리에 변환하려는 파일 명을 넣어주면 된다. 결과물을 복사해서 Data URL의 data자리에 넣어주면 내가 인코딩한 파일이 보여지는걸 확인할 수 있다! 꿀잼

uuencode -m infile remotename

---

3. Data URI은 언제 사용하고, 언제 사용하지 말아야 할까?

Data URL을 많이 첨부한 html문서는 파일 사이즈가 커진다는 단점이 있다.  작은 파일들을 첨부하기엔 Data URL이 유용할 수 있으나, 큰 파일이라면 좋지 않다.  왜냐하면 Data URL로 인코딩된 이미지는 보통 바이너리 형식의 동일한 이미지보다 약간 더 크기 때문이다. 또한 브라우저 캐싱 기능을 활용할 수 없기 때문에 이미지가 모든 페이지에서 다시 로드되는 경우 특히 문제가 될 수 있다. 그리고 이미지가 자주 변경된다면 일일이 새로 인코딩해줘야 한다는 단점도 있다.

결론

• 작은 파일을 첨부할 때에 사용하자.
• 자주 수정되거나 크기가 큰 파일을 첨부하는 용도로는 사용을 자제하자.

---

참조

MDN, https://flaviocopes.com/data-urls/