Base64 인코딩

Base64는 무엇을 하는 인코딩인가

Base64는 임의의 바이트를 영문 대소문자·숫자·+·/ 64가지 글자로만 표현하는 방법입니다. 암호가 아닙니다. 누구나 바로 되돌릴 수 있으니, 비밀번호를 감추는 용도로 쓰면 안 됩니다.

쓰는 이유는 통로가 텍스트만 통과시키기 때문입니다. 메일 본문, JSON 값, HTML 속성, 쿠키처럼 바이너리를 그대로 담을 수 없는 자리에 이미지나 파일을 실어 보낼 때 씁니다. 대신 데이터가 약 33% 커집니다.

옵션 고르는 법

URL 안전을 켜면 +는 -로, /는 _로 바뀝니다. 일반 Base64를 주소에 그대로 넣으면 +가 공백으로 해석되고 /가 경로 구분자로 잘려 값이 깨집니다.

한글은 어떻게 처리되나

이 도구는 텍스트를 먼저 UTF-8 바이트로 바꾼 뒤 인코딩합니다. 한글 한 글자는 3바이트라 가 하나가 6rCA 네 글자가 됩니다. 자바스크립트의 btoa()를 한글에 그냥 쓰면 InvalidCharacterError가 나는데, UTF-8 변환을 건너뛰기 때문입니다.

이미지를 data URI로 만들려면

이미지 파일을 입력창에 끌어다 놓고 나온 문자열 앞에 MIME 타입을 붙이면 됩니다.

<img src="data:image/png;base64,여기에_결과_붙여넣기">

수 KB짜리 아이콘에는 요청 한 번을 아끼는 효과가 있지만, 큰 이미지는 오히려 손해입니다. HTML·CSS 안에 들어가면 따로 캐시되지 않아 페이지를 열 때마다 다시 내려받게 됩니다.