이미지 → Base64 변환 (data URL)

data URL이란

data:image/png;base64,iVBORw0… 형태의 문자열은 파일 내용을 주소 자체에 담은 것입니다. 브라우저는 이 문자열을 보고 별도 요청 없이 이미지를 그립니다. HTML의 src, CSS의 url(), 마크다운, 이메일 본문 등 텍스트만 들어갈 수 있는 곳에 이미지를 넣을 수 있습니다. 변환은 브라우저의 FileReader가 원본 바이트를 그대로 인코딩하는 것이므로 화질 변화가 없습니다. 파일은 서버로 전송되지 않습니다.

왜 33% 커지는가

Base64는 3바이트(24비트)를 6비트씩 잘라 4글자로 적습니다. 글자 하나가 1바이트이므로 3바이트가 4바이트가 되어 정확히 4/3, 약 33% 늘어납니다. 여기에 data:image/png;base64, 머리말이 붙습니다. gzip 전송 압축이 일부를 되돌려 주지만 원본 바이너리만큼은 아닙니다.

언제 쓰고 언제 쓰지 말아야 하나

수 KB 이하의 아이콘, 로딩 스피너, 이메일 서명 이미지처럼 작고 개수가 많은 것은 인라인으로 넣으면 요청 수가 줄어 유리합니다. 반면 사진처럼 큰 파일은 HTML/CSS 파싱을 막고, 브라우저 캐시가 페이지 단위로만 되며, 같은 이미지를 여러 페이지에서 쓰면 매번 다시 받아야 합니다. 대략 10KB를 넘으면 별도 파일과 CDN 캐시가 낫습니다. 1MB 경고는 이 기준을 크게 넘었다는 뜻입니다.

SVG는 Base64가 필요 없다

SVG는 이미 텍스트이므로 data:image/svg+xml;utf8,<svg …>처럼 URL 인코딩만 해서 넣는 편이 더 작습니다. 다만 #와 따옴표는 반드시 이스케이프해야 하므로, 번거로우면 Base64를 써도 동작은 합니다.

자주 묻는 질문