Data URI, 파일을 문서에 임베드하기

최근 의외로 자주(다시?) 사용하게 되는 것 중 하나로 Data URI를 꼽을 수 있다.

Data URI는 data: 접두사가 붙은 데이터 문자열로, 이미지나 영상, 심지어 사운드 파일도 될 수 있다.

1. Data URI

Mozilla.org의 Data URIs 문서를 살펴보면 Data URI는 아래와 같은 형식을 가진다.

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

여기서 <mediatype>은 jpg, png, wav, mp3등 데이터의 형식(MIME 타입이므로 실제로는 image/jpg 같은 형태로 적힌다), 

base64는 대상 파일을 base64 형식으로 변환한 실제 데이터를 뜻한다. 여기서 base64는 바이트를 아스키 코드 문자열로 변환하는 방식인데,

원래 플랫폼 독립적인 형식으로 데이터를 전송하기 위해 만들어졌지만 이 포스트에서는 웹 프로그래밍에서 사용할 때를 가정하므로 해당 장점은 의미가 없다.

결과적으로 Data URI는 파일을 '문자열로 변환한 것'이라 할 수 있다.

2. 예제

아래 코드는 티스토리 로고 이미지를 Data URI로 변환한 것이다.

Data URI

data:image/png;base64,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

이미지

위 이미지 HTML 코드

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

Data URI를 src 속성으로 바로 사용한다. 

3. 장점과 단점

Data URI로 변환된 파일을 포함하면 페이지가 로딩 된 이후 이미지가 점차적으로 보이는 '로딩' 없이 바로 이미지를 보여 줄 수 있다는 장점이 있다.

또, 이미지가 포함된 문서를 CLOB 형식으로 저장 할 수 있어 파일 업로드 과정을 생략할 수 있다. 

그 때문인지 대부분의 오픈소스 위지윅 에디터는 이미지 첨부에 이미지를 Data URI로 변환하는 기능을 제공하고 있다.

하지만 당연하게도 Data URI를 포함하고 있는 파일 자체의 용량이 커지므로 오히려 초기 로딩 시간은 늘어난다.

뿐만 아니라 데이터가 base64 형식으로 변환하면서 기존 용량의 33%정도가 커진다.

마지막으로, 파일 자체에 이미지를 포함하고 있으므로 모바일 유저에게 데이터 사용량 폭탄을 투하할 수도 있다.

4. IDE에서 변환하기

IntelliJ에는 Base64 image encoder라는 플러그인이 있다. 이 플러그인을 설치하고 이미지를 열면

가장 오른쪽에 보이는 64 아이콘을 통해 이미지를 data uri로 변환할 수 있다. 이렇게 변환된 이미지를 코드에 작성하면 된다.

이미지의 용량이 너무 크면 IDE가 뻗어버릴 수도 있다...

이미지를 Data URI로 변환해 주는 사이트들도 많다. 이미지 업로드가 꺼려지지 않는다면 그런 사이트를 이용해 보는 것도 좋다.

5. 스크립트에서 변환하기

스크립트에서 직접 변환해야 할 때도 있다. 그런 경우에는 아래 코드처럼 FileReader 객체를 이용할 수 있다.

<input type="file" (change)="encodeImageFileAsURL($event)">

encodeImageFileAsURL($event) {
  const files = $event.target.files;
  if (files.length <= 0) return;

  const file = files[0];
  const reader = new FileReader();
  reader.onloadend = () => console.log(reader.result); // Data URI 출력
  reader.readAsDataURL(file);
}

Angular가 아닌 경우 아래 함수 부분만 떼어 사용하면 된다.