이미지→Base64 변환 원리
변환 과정 전체가 브라우저에서 File API와 내장 btoa 함수를 사용해 실행됩니다 — 코덱 라이브러리를 다운로드할 필요 없고 서버가 이미지를 보지 않습니다. 처음부터 끝까지의 파이프라인은 다음과 같습니다:
- 이미지를 드롭하거나 선택합니다. 브라우저가 로컬 디스크에서 Blob으로 읽어 들이며, 바이트를 서버에 복사하지 않습니다.
- 파일은 1 MB 단위 청크로 읽히고 각 청크의 바이트가 바이너리 문자열에 추가됩니다. 청크 분할로 대용량 이미지가 JavaScript 콜 스택을 초과하는 것을 방지합니다.
- 바이너리 문자열을 btoa에 전달합니다. btoa는 세 바이트마다 A–Z, a–z, 0–9, +, / 알파벳에서 네 개의 Base64 문자로 매핑합니다.
- File 객체에서 MIME 타입(image/png, image/jpeg 등)을 읽어 data: 프리픽스로 앞에 붙여 완전한 data:image/…;base64,… URI를 생성합니다.
- 페이지는 그 URI에서 네 가지 출력을 조합합니다 — 전체 data URI, 프리픽스 없는 원시 Base64, 바로 붙여넣기 가능한
태그, CSS background-image 스니펫 — 각각 복사 버튼이 붙어 있습니다.
이미지를 data URI로 인코딩하는 이유
- 작은 로고나 아이콘을 data URI로 인라인 처리하면 별도의 네트워크 왕복이 없어져 페이지나 이메일의 첫 번째 프레임 렌더링이 조금 빨라집니다.
- 이미지가 인라인된 페이지나 스타일시트는 자체 완결형이므로 오프라인에서도 작동하고 에셋 폴더를 끌고 다니지 않아도 복사할 수 있습니다.
- 많은 메일 클라이언트가 원격 이미지를 기본적으로 차단합니다. 로고를 Base64로 인라인 처리하면 메일이 열리는 순간 표시되며 원격 페치가 필요 없습니다.
- 인코딩이 브라우저에서 완전히 이루어지므로 민감한 이미지가 서드파티 서버로 전송되지 않습니다. 스크린샷, 신분증 스캔본, 내부 설계도에 적합합니다.
Base64 이미지의 일반적인 활용 사례
data URI는 이미지가 충분히 작아서 별도 요청 비용이 Base64가 추가하는 약 33% 크기 증가보다 큰 경우에 쓰입니다. 세 가지 패턴이 자주 등장합니다:
- CSS 인라인 아이콘: 1–2 KB 스프라이트나 아이콘을 스타일시트에 background-image: url(data:…)로 삽입해 규칙을 완전히 자체 완결시킵니다.
- 이메일 서명과 뉴스레터: data URI src를 가진
로 로고를 삽입하면 클라이언트가 원격 이미지를 차단해도 렌더링됩니다.
- 빌드 도구 인라인: Webpack, Vite 같은 번들러는 바이트 임계값 아래의 에셋을 자동으로 인라인 처리하는데, 이 도구로 그 출력이 어떤 모습인지 미리 확인할 수 있습니다.
Base64 이미지는 어떻게 생겼나요?
1×1 투명 PNG를 예로 들겠습니다. 원시 바이트는 67바이트뿐이지만 인코딩하면 iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= 라는 문자열이 되고, 전체 data URI는 data:image/png;base64,iVBORw0KGgo…가 됩니다. 인코딩된 형태가 원본보다 약 3분의 1 더 크다는 것을 주목하세요. 이것이 바이너리 데이터를 텍스트에 안전하게 직접 임베드하기 위한 트레이드오프입니다.
제 이미지가 어딘가에 업로드되나요?
아니요. 변환은 브라우저의 File API와 네이티브 btoa 함수를 사용해 기기에서 완전히 이루어집니다. 직접 확인하려면: 브라우저 개발자 도구를 열고 네트워크 패널로 이동한 뒤 이미지를 변환해 보세요 — 페이지 로드와 광고 관련 요청만 보일 뿐 이미지에 관한 어떤 데이터도 서버로 전송되지 않습니다. 스크린샷, 신분증 서류, 내부 설계도에 안전합니다.
왜 Base64 출력이 원본 이미지보다 큰가요?
Base64는 바이너리 데이터 3바이트를 4개의 ASCII 문자로 나타내므로 인코딩된 텍스트는 소스 파일보다 약 33% 커집니다. 이 페이지의 data URI 크기 표시에서 정확한 팽창 크기를 확인할 수 있습니다. 그래서 data URI는 작은 이미지에만 적합합니다 — 2 MB 사진을 인라인 처리하면 HTML이나 CSS가 별도 요청 비용보다 훨씬 더 커집니다. 경험상 4 KB 이하는 인라인, 그보다 큰 이미지는 링크 참조가 권장됩니다.
어떤 이미지 형식을 변환할 수 있나요?
이 도구는 이미지를 디코딩하지 않고 원시 바이트를 읽기 때문에 브라우저가 이미지로 인식하는 모든 형식이 작동합니다. PNG, JPEG, GIF, WebP, SVG, BMP를 지원합니다. MIME 타입은 파일에서 직접 읽히므로 data: 프리픽스는 항상 실제 형식과 일치합니다 — JPEG는 data:image/jpeg, SVG는 data:image/svg+xml을 생성합니다. SVG 특별 참고: SVG는 이미 텍스트 형식이므로 SVG의 경우 URL 인코딩된 data URI가 Base64 버전보다 작은 경우가 많지만, 이 도구는 일관성을 위해 Base64 형식으로 출력합니다.
이미지를 드롭하고, 필요한 data URI나 스니펫을 복사해서 HTML, CSS, 이메일 템플릿에 붙여넣으세요. 모든 바이트는 기기에 그대로 있습니다. 업로드 없음, 계정 없음, 서버 왕복 없음.