멋쟁이사자처럼FE 2기/TIL

19일차_Base 64코드

(범) 2022. 4. 21. 13:25

1. 개념


Base64 Encoding은 Binary Data를 Text로 변경하는 Encoding이다.


인코딩(encoding)

파일에 저장된 정보의 형태나 형식을 데이터 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태로 변환하는 처리 혹은 그 처리 방식을 말합니다. 이메일 등의 전송, 동영상이나 이미지 영역에서 많이 사용되며,

반대말은 디코딩(decoding)입니다.


 

 

 

2. Base64를 사용하는 이유


배경

Base64 Encoding을 하게되면 전송해야 될 데이터의 양도 약 33% 정도 늘어난다.

6bit당 2bit의 Overhead가 발생하기 때문이다. http://www.base64encode.org/에서 직접 테스트해보면 어렵지 않게 확인 할 수 있다. Encoding전 대비 33%나 데이터의 크기가 증가하고, Encoding과 Decoding에 추가 CPU 연산까지 필요한데 우리는 왜 Base64 Encoding을 하는가?

 

이유

문자를 전송하기 위해 설계된 Media(Email, HTML)를 이용해 플랫폼 독립적으로 Binary Data(이미지나 오디오)를 전송 할 필요가 있을 때, ASCII로 Encoding하여 전송하게 되면 여러가지 문제가 발생할 수 있다. 대표적인 문제는

  • ASCII는 7 bits Encoding인데 나머지 1bit를 처리하는 방식이 시스템 별로 상이하다.
  • 일부 제어문자 (e.g. Line ending)의 경우 시스템 별로 다른 코드값을 갖는다.

위와 같은 문제로 ASCII는 시스템간 데이터를 전달하기에 안전하지가 않다. 

Base64는 ASCII 중 제어문자와 일부 특수문자를 제외한 64개의 안전한 출력 문자만 사용한다.
(* 안전한 출력 문자는 문자 코드에 영향을 받지 않는 공통 ASCII를 의미한다).

 

 

2.1 이미지를 base64인코딩 방식으로 사용하는 경우


  1. 크기가 작은 이미지를 이미지 파일없이 html에 만들어 넣는 경우
  2. 간단한 페이지를 작성해 임시로 이미지를 사용하는 경우
  3. 메일을 html으로 작성해서 보내는 경우

 

3. base64인코딩 장단점


장점

  1. 서버에 이미지를 넣지 않아도 되므로 간단한 구현이 가능하다.
  2. 렌더시, 문서로딩과 같이 로딩되기에 끊기지 않고 불려온다.

단점

  1. 코딩시 가독성이 떨어진다.
  2. 용량이 커진다.
    256가지를 표현할 수 있는 바이트를 printable한 64가지를 사용해서 표현하니 당연하다.
    다시 말해, 8비트를 6비트로 표현하는 것이다.
    3개의 8비트는 4개의 6비트로 표현할 수 있다.
    따라서 Base64 인코딩을 사용하면 원본보다 33%의 크기 증가가 발생한다.

참고페이지

https://velog.io/@byeol4001/Base-64%EC%99%80-base64-img-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

 

Base 64와 base64 img 사용하기

html에 img의 src에 url이 아닌 숫자와 문자로 구성된 긴 코드가 들어간 경우가 있었는데 data:image/png;base64와 같은 형태였다.검색 후 아래와 경우에는 이미지를 base64인코딩 방식으로 사용한다는것을

velog.io

https://lovefor-you.tistory.com/175

 

암호화에서 BASE 64 인코딩이란?

안녕하세요! 1> BASE 64 의미 BASE 64는 8bit 의 이진 데이터를 공통 ASCII 문자들로 이루어진 문자열로 바꾸는 인코딩 방식입니다. 즉, 바이너리 데이터를String형태로 변경하는 의미입니다. (바이너리

lovefor-you.tistory.com