HTML 파일 하나에 이미지까지 통째로 담고 싶을 때가 있다. 이미지 파일을 텍스트 문자열로 바꿔서 코드 안에 직접 넣으면 되는데, 이때 쓰는 게 Base64 인코딩이다.
Base64란
Base64는 바이너리 데이터를 64가지 문자(A-Z, a-z, 0-9, +, /)로 표현하는 인코딩 방식이다. 이미지나 파일처럼 텍스트가 아닌 데이터를 텍스트만 허용되는 환경에서 전달할 때 쓴다. 원본 대비 크기가 약 33% 늘어나는 대신, 텍스트 형태로 안전하게 주고받을 수 있다.
암호화와 혼동하는 경우가 있는데, Base64는 암호화가 아니다. 누구나 디코딩할 수 있기 때문에 비밀번호나 민감 정보를 Base64로 숨기면 안 된다.
실무에서 쓰이는 곳
| 사용처 | 설명 |
|---|---|
| 이메일 첨부파일 | MIME 프로토콜에서 바이너리 파일을 텍스트로 변환해 전송 |
| 이미지 Data URL | CSS나 HTML에 이미지를 직접 삽입할 때 data:image/png;base64,... 형태로 사용 |
| API 인증 | HTTP Basic Auth에서 아이디:비밀번호를 Base64로 인코딩해 헤더에 담음 |
| JWT 토큰 | JSON Web Token의 헤더와 페이로드가 Base64URL로 인코딩됨 |
| 데이터 저장 | JSON이나 XML 안에 바이너리 데이터를 문자열로 포함할 때 |
텍스트 Base64 변환 예시
"Hello"를 Base64로 인코딩하면 SGVsbG8=가 된다. 끝에 붙는 =는 패딩 문자로, 입력 데이터 길이가 3바이트의 배수가 아닐 때 추가된다. 한글 "안녕"은 UTF-8 바이트로 먼저 변환된 뒤 Base64가 적용되어 7JWI64WV가 된다.
참고 Base64URL은 일반 Base64에서+를-로,/를_로 바꾼 변형이다. URL에 +와 /가 들어가면 문제가 생기기 때문에 JWT나 URL 파라미터에서는 Base64URL을 쓴다.
이미지를 Base64로 바꾸면 좋은 경우
아이콘이나 작은 이미지를 HTML/CSS 안에 Data URL로 넣으면 HTTP 요청 수를 줄일 수 있다. 이미지 파일을 따로 호스팅할 필요 없이 코드 안에 포함되니, 이메일 템플릿이나 단일 HTML 파일을 만들 때 특히 유용하다.
- 작은 아이콘(수 KB 이하): Data URL로 넣으면 서버 요청 1개 절약
- 이메일 HTML 템플릿: 외부 이미지 링크가 차단되는 환경에서 Base64로 삽입하면 깨지지 않음
- 큰 이미지(수백 KB 이상): 변환하면 33% 더 커지니 오히려 비효율적. 이 경우 파일 링크가 낫다
변환 방법
텍스트든 이미지든 Base64 변환기에 넣으면 바로 결과가 나온다. 텍스트 탭에서 문자열을 입력하면 인코딩과 디코딩이 실시간으로 처리되고, 이미지 탭에서는 파일을 드래그 앤 드롭하면 Data URL이 생성된다. PNG, JPG, GIF, SVG, WebP를 모두 지원한다.
입출력 크기와 증가율까지 표시되어 변환 전후 용량 차이를 바로 파악할 수 있다. 브라우저에서만 처리되니 API 키 같은 민감한 문자열도 부담 없이 돌려볼 수 있다.