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인코딩 방식으로 사용하는 경우
- 크기가 작은 이미지를 이미지 파일없이 html에 만들어 넣는 경우
- 간단한 페이지를 작성해 임시로 이미지를 사용하는 경우
- 메일을 html으로 작성해서 보내는 경우
3. base64인코딩 장단점
장점
- 서버에 이미지를 넣지 않아도 되므로 간단한 구현이 가능하다.
- 렌더시, 문서로딩과 같이 로딩되기에 끊기지 않고 불려온다.
단점
- 코딩시 가독성이 떨어진다.
- 용량이 커진다.
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
'멋쟁이사자처럼FE 2기 > TIL' 카테고리의 다른 글
SVG로 지도 만들기 (0) | 2022.04.21 |
---|---|
유용한 디자인 사이트 모음 (0) | 2022.04.21 |
스크롤 디자인 변경하기_CSS (6) | 2022.04.20 |
18일차_반응형 컨텐츠 만들기(CSS) (0) | 2022.04.20 |
17일차_CSS 실무 테크닉 (2) | 2022.04.19 |