Base64, Blob URL Image Binding 기법.

안녕하세요?

이번 포스팅에서는 Blob (Binary Large Object), Base64 를 사용하여 img 태그에 

데이터를 바인딩 하는 방법에 대해 포스팅 하고자 합니다.

간혹 웹페이지에 있는 이미지들을 특수 목적에 의해 이미지를 불러와 base64 로 바인딩 하는 경우가 

종종 있습니다. 용량이 크고 많은 이미지가 아니라면 base64 로 바인딩해서 사용하는 부분에 큰 문제가 되지 않지만,

용량이 크고 많은 이미지를 base64 로 바인딩 사용한다면,

base64 String 에 의해 DOM 문서 크기가 상당히 커지면서 성능에 대한 저하가 있습니다.

따라서, 이런 문제를 해결하기 위해 blob 객체로 바꾸고, blob URL 을 사용하여 이미지를 바인딩한다면,

이런 성능 저하 문제를 어느 정도 해결 할 수 있습니다.

<그림 1> base64 string 으로 이미지를 바인딩한 DOM 문서

<그림 2> blob URL 을 통한 이미지를 바인딩한 DOM 문서

아래 예제 파일 및 소스파일을 첨부 합니다.

SampleImageBinding.html

참고

1. 위키 https://ko.wikipedia.org/wiki/%EB%B2%A0%EC%9D%B4%EC%8A%A464

2. Mozilra https://developer.mozilla.org/ko/docs/Web/API/Blob