CSS에 배경 이미지를 넣는데 외부 파일 없이 코드 안에 직접 삽입하고 싶다. 이럴 때 이미지를 Base64 인코딩해서 Data URL로 바꾸면 된다. Base64는 바이너리 데이터를 텍스트로 표현하는 방식인데, 웹 개발에서 생각보다 자주 만나게 된다.
Base64가 뭔가
Base64는 바이너리 데이터(이미지, 파일 등)를 A~Z, a~z, 0~9, +, / 총 64개 문자만으로 표현하는 인코딩 방식이다. 이메일 첨부 파일, JWT 토큰, HTML 인라인 이미지 등 텍스트만 전달할 수 있는 환경에서 바이너리를 실어 보내기 위해 쓴다.
참고 Base64로 인코딩하면 원본보다 크기가 약 33% 늘어난다. 암호화가 아니라 단순 변환이기 때문에 보안 용도로는 쓸 수 없다.
개발에서 실제로 쓰는 경우
- HTML/CSS 인라인 이미지
- 작은 아이콘이나 로고를 외부 파일 요청 없이 코드에 직접 넣을 때. HTTP 요청 수를 줄이는 효과가 있다.
- API 데이터 전송
- JSON으로 이미지나 파일을 보내야 할 때. JSON은 텍스트만 담을 수 있으니까 Base64로 변환해서 문자열 필드에 넣는다.
- JWT 토큰 디버깅
- JWT의 페이로드는 Base64URL로 인코딩되어 있다. 디코딩하면 안에 담긴 사용자 정보나 만료 시간을 확인할 수 있다.
- 이메일 첨부
- SMTP 프로토콜이 텍스트 기반이라 첨부 파일을 Base64로 인코딩해서 전송한다.
텍스트·이미지를 변환하는 법
Base64 변환 도구에 텍스트를 넣으면 인코딩/디코딩 결과가 바로 나온다. 이미지 탭에서는 PNG, JPG, SVG 파일을 드래그해서 놓으면 Data URL 형태의 Base64 문자열이 생성된다. HTML의 <img src="data:image/png;base64,...">에 그대로 붙여넣을 수 있다.
큰 이미지를 Base64로 바꾸면 HTML 파일 자체가 무거워지니까, 수 KB 이하의 작은 아이콘 정도에만 쓰는 게 좋다.