HTML 파일 안에 이미지를 직접 넣어야 하는 상황이 생겼다. 외부 이미지 경로를 쓰면 파일이 사라졌을 때 깨지니까, 이미지 자체를 코드에 포함하는 방법이 필요했다. 그게 바로 Base64 Data URL이다.
Base64가 뭔가
Base64는 바이너리 데이터를 텍스트 문자(A-Z, a-z, 0-9, +, /)만으로 표현하는 인코딩 방식이다. 이미지, 파일, 특수문자가 포함된 데이터를 텍스트만 전송할 수 있는 환경에서 안전하게 주고받기 위해 쓴다.
어디서 쓰이나
| 용도 | 설명 |
|---|---|
| 이메일 첨부 파일 | SMTP 프로토콜은 텍스트만 전송 가능해서, 첨부 파일을 Base64로 인코딩하여 본문에 포함한다 |
| HTML/CSS Data URL | 작은 아이콘을 data:image/png;base64,... 형태로 직접 넣으면 HTTP 요청 수가 줄어든다 |
| API 인증 토큰 | JWT(JSON Web Token)의 페이로드가 Base64로 인코딩되어 있다 |
| 설정 파일 | 바이너리 데이터를 JSON이나 XML 같은 텍스트 형식에 담을 때 쓴다 |
인코딩하면 크기가 커진다
Base64로 변환하면 원본보다 약 33% 크기가 증가한다. 3바이트의 바이너리를 4개의 ASCII 문자로 표현하기 때문이다. 그래서 큰 이미지를 Base64로 넣으면 HTML 파일이 무거워진다. 아이콘이나 작은 로고(수 KB 이하)에만 쓰는 게 실용적이다.
주의 Base64는 암호화가 아니다. 누구나 디코딩할 수 있기 때문에 비밀번호나 민감한 정보를 Base64로 보호하는 것은 보안에 아무 도움이 되지 않는다.
텍스트와 이미지 변환 방법
- 텍스트라면 입력창에 붙여넣고 인코딩 버튼을 누른다
- 이미지라면 파일을 드래그 앤 드롭하면 Data URL이 자동 생성된다
- 결과를 복사해서 코드나 설정 파일에 넣으면 된다
Base64 변환기에서 텍스트와 이미지 모두 처리할 수 있다. 인코딩된 문자열을 다시 원본으로 되돌리는 디코딩도 같은 화면에서 바로 된다.
개발 중에 Base64 문자열을 만나면 겁먹을 필요 없다. 인코딩 방식일 뿐이고, 디코딩하면 원본이 그대로 나온다.