HTML 파일 안에 이미지를 넣어야 하는데 별도 파일로 첨부하기 곤란한 상황이 있다. 이메일 서명에 로고를 넣거나, 단일 HTML 파일로 보고서를 만들 때가 그렇다. Base64를 쓰면 이미지 파일을 긴 텍스트 문자열로 변환해서 코드 안에 직접 삽입할 수 있다.
Base64가 뭔가
Base64는 바이너리 데이터를 64개의 인쇄 가능한 문자(A~Z, a~z, 0~9, +, /)로 변환하는 인코딩 방식이다. 0과 1로 이루어진 파일 데이터를 텍스트 형태로 바꿔주기 때문에, 텍스트만 전송할 수 있는 환경에서 파일을 주고받을 수 있게 된다.
어디에 쓰이나
- 이메일 첨부 파일
- 이메일 프로토콜(SMTP)은 기본적으로 텍스트만 전송한다. 첨부 파일은 Base64로 인코딩되어 메일 본문에 포함된 뒤, 수신 측에서 디코딩해서 복원된다.
- 이미지 인라인 삽입
- CSS나 HTML에서
data:image/png;base64,...형태로 이미지를 직접 넣을 수 있다. 작은 아이콘이나 로고에 쓰면 HTTP 요청 수를 줄일 수 있다. - API 데이터 전송
- JSON은 바이너리를 직접 담을 수 없으므로, 파일이나 이미지를 Base64 문자열로 변환해서 전송한다.
변환 시 크기가 늘어난다
Base64로 인코딩하면 원본 대비 약 33% 크기가 증가한다. 3바이트 데이터가 4문자로 변환되기 때문이다. 큰 이미지를 Base64로 바꿔서 HTML에 넣으면 페이지 로딩이 느려질 수 있으니, 수 KB 이하의 작은 이미지에만 쓰는 게 좋다.
TIP 파비콘이나 이메일 서명 로고처럼 1~5KB 이하의 작은 이미지는 Base64로 변환해서 HTML에 직접 넣는 게 외부 파일 참조보다 오히려 효율적이다.
텍스트와 이미지 모두 변환하기
Base64 변환 도구에서 텍스트를 입력하면 인코딩/디코딩 결과가 실시간으로 나온다. 이미지 탭에서는 파일을 끌어다 놓으면 Data URL 형태의 Base64 문자열이 생성되어, 복사해서 바로 HTML이나 CSS에 붙여넣을 수 있다.
Base64는 암호화가 아니라 인코딩이다. 원문을 숨기는 게 아니라 형식을 바꿀 뿐이므로, 보안 목적으로 쓰면 안 된다는 점만 기억하면 된다.