이미지 Base64 변환 (data URI)
이미지를 data URI로, Base64를 이미지로 — 미리보기·크기 비교
이미지를 “텍스트”로 바꾸는 것
이미지는 원래 바이트 덩어리라 코드(텍스트) 안에 그대로 넣을 수 없습니다. Base64는 그 바이트를 A~Z·a~z·0~9와 몇 개 기호만 써서 텍스트로 표현하는 방법입니다. 이렇게 텍스트가 된 이미지를 data:로 시작하는 한 줄(data URI)에 담으면, 별도 파일 없이 CSS·HTML 안에 이미지를 직접 박아 넣을 수 있습니다.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
└──┬──┘ └───┬───┘ └─┬──┘ └──────────┬──────────┘
스킴 MIME 타입 인코딩 Base64 데이터이 한 줄을 <img src="...">나 CSS의 background-image: url(...)에 그대로 넣으면 그림이 나옵니다. 글자를 Base64로 다루는 일반적인 경우는 Base64 인코더가 맡고, 이 도구는 이미지 파일 ↔ data URI에 특화돼 미리보기와 크기 비교까지 함께 보여 줍니다.
언제 쓰면 좋은가 — 그리고 언제 쓰면 안 되는가
Base64 이미지는 만능이 아닙니다. 장점과 대가를 함께 알아야 제대로 씁니다.
좋은 경우: 아주 작은 아이콘·로고, 한두 개의 장식 이미지. 파일을 따로 받지 않아 HTTP 요청이 줄고, CSS 하나에 모든 게 들어 있어 관리가 단순합니다. 외부 이미지가 막히는 이메일에서도 보입니다.
피해야 할 경우: 큰 사진, 여러 페이지에서 재사용하는 이미지. 이유는 세 가지입니다.
- 약 33% 커진다 — Base64는 3바이트를 4글자로 표현하므로 원본보다 3분의 1쯤 늘어납니다. 위 도구가 원본 크기와 인코딩 후 크기를 나란히 보여 주는 이유입니다.
- 캐시가 안 된다 — 코드 안에 박혀 있어 브라우저가 이미지를 따로 저장하지 못합니다. 같은 이미지를 여러 페이지에서 써도 매번 다시 받습니다.
- CSS·HTML이 비대해진다 — 큰 이미지를 넣으면 파일이 거대해져 첫 로딩이 오히려 느려집니다.
정리하면 수 KB 이하의 작은 이미지에만 쓰고, 큰 사진은 일반 이미지 파일로 두는 것이 정석입니다.
SVG는 예외
SVG는 원래 텍스트(XML)라 Base64로 감싸면 오히려 커지고 읽기 어려워집니다. CSS에서는 url("data:image/svg+xml,%3Csvg...")처럼 SVG 원문을 URL 인코딩해 넣는 편이 더 작고 gzip 압축도 잘 됩니다. 이 도구는 SVG의 Base64 변환도 지원하지만, SVG라면 URL 인코더 방식을 먼저 고려해 보세요. 원본 이미지의 바이트가 base64로 몇 글자가 되는지, 그 크기 대가가 감당할 만한지는 위 도구가 숫자로 바로 보여 줍니다.
자주 묻는 질문
- 이미지를 Base64로 만들면 뭐가 좋은가요?
- 이미지를 별도 파일이 아니라 텍스트로 코드 안에 직접 넣을 수 있습니다(data URI). 그러면 브라우저가 이미지를 받으려고 서버에 따로 요청하지 않아도 되므로, 아주 작은 아이콘이 여러 개일 때 HTTP 요청 수를 줄여 첫 화면을 조금 빨리 그릴 수 있습니다. 또 CSS·HTML·이메일 템플릿 하나에 이미지가 포함돼 파일 관리가 단순해집니다. 외부 이미지 링크가 막히는 환경(일부 이메일)에서도 그림이 보인다는 장점도 있습니다.
- 그럼 모든 이미지를 Base64로 바꾸면 되나요?
- 아닙니다. Base64는 대가가 있습니다. 첫째, 원본보다 약 33% 커집니다(3바이트가 4글자가 되기 때문). 둘째, 코드 안에 박히므로 브라우저가 이미지를 따로 캐시하지 못합니다 — 같은 이미지를 여러 페이지에서 써도 매번 다시 내려받습니다. 셋째, CSS·HTML 파일이 거대해져 오히려 첫 로딩이 느려질 수 있습니다. 그래서 Base64는 '아주 작은 아이콘·로고(대략 수 KB 이하)'에만 쓰고, 큰 사진은 일반 이미지 파일로 두는 것이 정석입니다.
- data URI는 어떻게 생겼나요?
- `data:image/png;base64,iVBORw0KGgo...` 형태입니다. `data:` 뒤에 이미지 형식(MIME 타입, image/png 등), `;base64`, 쉼표, 그리고 Base64로 인코딩된 이미지 데이터가 이어집니다. 이 문자열 전체를 <img>의 src나 CSS의 background-image url()에 그대로 넣으면 이미지가 표시됩니다. 위 도구는 이미지 파일을 넣으면 이 data URI를 만들어 주고, 반대로 data URI를 넣으면 이미지로 되돌려 미리보기·저장할 수 있게 합니다.
- SVG도 Base64로 바꿔야 하나요?
- SVG는 대개 Base64가 아니라 그대로(또는 URL 인코딩) 넣는 편이 낫습니다. SVG는 원래 텍스트라 Base64로 감싸면 오히려 커지고 읽기 어려워집니다. CSS에서는 `url("data:image/svg+xml,%3Csvg...")`처럼 SVG 원문을 URL 인코딩해 넣는 방식이 더 작고, gzip 압축도 잘 됩니다. 이 도구는 SVG의 Base64 변환도 지원하지만, SVG라면 먼저 URL 인코딩 방식을 고려해 보세요.
- 업로드한 이미지가 서버로 전송되나요?
- 아니요. 이미지는 브라우저 안에서만 읽힙니다. 브라우저의 FileReader 기능으로 파일을 Base64로 바꾸며, 이미지를 어떤 서버로도 업로드하지 않습니다. 그래서 사적인 이미지를 넣어도 네트워크로 나가지 않고, 인터넷이 끊긴 상태에서도 동작합니다.