[추가 3]이미지 인코딩(BASE64)

추가2 에서 이미지를 이용한 시각화에 대해 가볍게 다루어 보았습니다.

추가3에서는 인코딩에 대해 다루어 볼려고 합니다.

 

BASE 64란?

“Base 64″란 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 문자열로 바꾸는 인코딩 방식

 

https://www.base64-image.de/

Base64 Image Encoder

BASE64 이미지 인코딩

위와 같이 이미지를 인코딩하면 이미지를 텍스트로 표현 할 수 있습니다.

이 의미는 무엇일까요?

 

1. DB에 이미지를 넣는다면?

서버에 이미지를 직접 넣지 않는 이점이 있다. 경우에 따라 텍스트를 DB에 넣어놓고 불러와

화면에 <img> 형식으로 뿌리면 매우 간단한 구현이 가능하다.

 

2. 이미지 랜더링

  브라우저가 이미지 랜더링 시, base64로 표현할 경우 문서 로딩과 동시에 함께 로딩되기에 끊기는 증상이 사라진다.

 

3. BASE64 이미지를 많이 이용하면 오히려 문서 로딩시간이 길어진다.

 

4. 용량이 크다

  인코딩 후 용량이 증가된다.

 

5. 가독성이 떨어진다.

  사진의 크기가 크다면, 태그에 매우긴 텍스트가 보이기에 가독성에 어려움을 준다.

 

그럼 base64 인코딩에 대해 알아봅시다.