이미지 → Base64 (데이터 URI)

이미지를 data: 주소로 바꿔 CSS 나 HTML 안에 바로 박아 넣습니다. 파일은 업로드되지 않습니다.

언제 쓰면 이득인가

데이터 URI 는 파일을 주소 안에 통째로 적는 방식입니다. 요청이 한 번 줄어드는 대신 글자 수가 3분의 4로 늘고, 브라우저가 따로 캐시하지 못합니다 — 그 CSS 파일이 바뀔 때마다 이미지도 같이 다시 내려받습니다.

이럴 때	이렇게
2 KB 짜리 아이콘 하나	데이터 URI 가 낫습니다. 요청 하나가 이미지보다 비쌉니다
메일 본문에 넣을 로고	데이터 URI. 외부 이미지는 대개 차단됩니다
단일 HTML 파일로 배포	데이터 URI. 파일 하나로 끝납니다
30 KB 넘는 사진	그냥 파일로 두세요. 캐시가 훨씬 이득입니다
여러 페이지에서 쓰는 이미지	파일. 한 번 받아 두면 나머지는 공짜입니다

대략 8 KB가 경계입니다. 그보다 크면 결과 아래에 "파일로 두는 편이 낫습니다"라고 적어 둡니다.

SVG 는 원래 글자라서 Base64 로 바꾸면 33% 손해만 봅니다. SVG → CSS 배경의 퍼센트 인코딩을 쓰면 5~10% 만 늘고, gzip 도 훨씬 잘 먹습니다.

.png 로 저장된 JPEG 파일이 생각보다 흔합니다. 이름만 보고 data:image/png 라고 적으면 어떤 브라우저는 그림을 거부합니다. 그래서 파일 앞 몇 바이트를 읽어 실제 형식을 판정하고, 결과 아래에 무엇으로 읽었는지 적어 둡니다.

파일이 서버로 올라가나요?

올라가지 않습니다. 브라우저가 파일을 읽어 이 페이지 안에서 인코딩합니다. 네트워크 요청 자체가 없습니다.

반대로 되돌리려면?

Base64 → 이미지에 붙여넣으면 그림을 보여 주고 파일로 저장해 줍니다.

왜 33%나 커지나요?

Base64 는 3바이트를 4글자로 적습니다. 8비트 값을 6비트씩 끊어 쓰기 때문입니다. 원래 주소·메일처럼 글자만 다닐 수 있는 통로로 바이너리를 보내려고 만든 방식이라, 늘어나는 건 대가입니다.