Base64 인코딩은 바이너리 이미지 데이터를 일반 텍스트 문자열로 변환하여, 별도의 파일을 참조하지 않고도 HTML, CSS, JSON, 이메일 본문에 이미지를 직접 삽입할 수 있게 해줍니다. 대신 파일 크기가 약 33% 증가하는 단점이 있습니다. 100KB 이미지는 Base64로 변환하면 약 133KB가 됩니다. 소형 아이콘이나 이메일에는 적합하지만, 큰 이미지에는 비효율적입니다.
Base64 인코딩이란?
Base64는 바이너리 데이터를 64개의 인쇄 가능한 ASCII 문자(A–Z, a–z, 0–9, +, /)로 표현하는 인코딩 방식입니다. 바이너리 데이터 3바이트마다 Base64 문자 4개로 변환되므로, 인코딩된 결과는 항상 원본보다 약 33% 더 커집니다.
이미지의 경우, 브라우저가 해석 방법을 알 수 있도록 일반적으로 데이터 URI 스킴 접두사를 붙입니다:
data:image/jpeg;base64,/9j/4AAQSkZJRgAB...이 자립형 문자열은 URL이 허용되는 모든 곳에 사용할 수 있습니다. <img> src 속성, CSS background, JSON 필드, 이메일 HTML 본문 등에 자유롭게 삽입할 수 있습니다.
Base64 이미지를 사용해야 할 때
- 소형 아이콘 및 인라인 SVG (5KB 미만) — 작은 아이콘을 임베딩하면 추가 HTTP 요청을 피할 수 있습니다. 아이콘이 많은 페이지에서는 이 절약 효과가 누적됩니다.
- 이메일 HTML — 많은 이메일 클라이언트(Outlook, 특정 모드의 Gmail 등)는 외부 링크 이미지를 차단합니다. 이미지를 Base64 데이터 URI로 임베딩하면 항상 표시됩니다.
- CSS 데이터 URI — 소형 배경 패턴이나 스프라이트를 스타일시트에 인라인으로 삽입하면 CSS와 함께 단일 요청으로 로드됩니다.
- JSON API 페이로드 — JSON만 허용하는 API로 이미지를 전송해야 할 때(예: 머신러닝 엔드포인트에 썸네일 전송), Base64를 사용하면 텍스트 필드에 바이너리 데이터를 포함할 수 있습니다.
- 단일 파일 HTML 문서 — 외부 에셋 없이 완전히 자립적이어야 하는 프레젠테이션, 보고서, 오프라인 도구 등에 적합합니다.
Base64를 사용하지 말아야 할 때
- 큰 이미지 — 33% 크기 오버헤드가 빠르게 누적됩니다. 1MB 사진은 Base64 텍스트로 1.33MB가 되어 HTML이나 JSON 페이로드가 크게 비대해집니다.
- 브라우저 캐싱이 필요한 이미지 — 브라우저는 이미지 파일을 독립적으로 캐시합니다. Base64로 임베딩된 이미지는 HTML이나 CSS 파일의 일부가 되어 별도로 캐시될 수 없으므로, 매 페이지 로드마다 다시 다운로드됩니다.
- 여러 페이지에서 사용되는 이미지 — 같은 이미지가 10개 페이지에 각각 Base64로 인코딩되어 있다면, 브라우저가 캐시된 파일 하나를 가져오는 대신 전체 인코딩 문자열을 10번 전송하게 됩니다.
- 성능이 중요한 페이지 — 큰 인라인 데이터 URI는 HTML 파싱을 지연시키고, Time to First Byte를 늘리며, JS 파일에 포함될 경우 JavaScript 번들을 비대하게 만듭니다.
온라인으로 변환하기
이미지가 일반적이지 않은 형식이라면, 먼저 Picovert의 이미지 변환기로 JPEG 또는 PNG로 변환한 다음, Base64 인코더 도구에 붙여넣으세요("base64 image encoder"로 검색하면 많은 무료 도구가 있습니다). 대부분의 온라인 도구는 JPG, PNG, GIF, WebP, SVG를 지원하며 바로 붙여넣을 수 있는 완전한 데이터 URI 문자열을 반환합니다.
JavaScript로 변환하기
브라우저 환경에서는 FileReader API를 사용해 File 또는 Blob 객체를 읽고 Base64 페이로드가 포함된 데이터 URI 문자열을 반환받을 수 있습니다:
const toBase64 = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result)
reader.onerror = reject
})
// 파일 입력과 함께 사용
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', async () => {
const base64 = await toBase64(input.files[0])
console.log(base64) // "data:image/jpeg;base64,..."
})Node.js(v18+)에서는 내장 fs 모듈과 Buffer를 사용하세요:
import { readFileSync } from 'fs'
const buffer = readFileSync('image.jpg')
const base64 = buffer.toString('base64')
const dataUri = `data:image/jpeg;base64,${base64}`Python으로 변환하기
Python 표준 라이브러리에는 base64 모듈이 포함되어 있어 추가 패키지가 필요하지 않습니다:
import base64
with open("image.jpg", "rb") as f:
data = base64.b64encode(f.read()).decode("utf-8")
# 완전한 데이터 URI 구성
data_uri = f"data:image/jpeg;base64,{data}"
print(data_uri)형식에 따라 image/jpeg를 image/png, image/webp, image/gif 등으로 변경하세요.
커맨드 라인으로 변환하기
macOS / Linux — base64 명령어가 시스템에 내장되어 있습니다:
base64 -i image.jpg -o image_base64.txtWindows PowerShell:
[Convert]::ToBase64String([IO.File]::ReadAllBytes('image.jpg')) | Out-File image_base64.txt두 명령어 모두 데이터 URI 접두사 없이 순수 Base64 문자열을 텍스트 파일에 저장합니다. HTML이나 CSS에서 사용할 때는 data:image/jpeg;base64,를 직접 앞에 붙여주세요.
HTML에서 사용하기
src 속성을 전체 데이터 URI로 대체하세요:
<img
src="data:image/jpeg;base64,{YOUR_BASE64_STRING}"
alt="임베딩된 이미지"
width="200"
height="150"
/>{YOUR_BASE64_STRING}을 실제 인코딩된 값으로 교체하면 브라우저가 일반 이미지 URL과 동일하게 디코딩하여 렌더링합니다.
CSS에서 사용하기
데이터 URI는 background-image를 포함하여 URL을 허용하는 모든 CSS 속성에서 작동합니다:
.icon {
background-image: url("data:image/png;base64,{YOUR_BASE64_STRING}");
background-size: contain;
width: 24px;
height: 24px;
}HTTP 요청 제거로 인한 절약 효과가 크기 증가를 상쇄하는 소형 아이콘이나 반복 패턴에 가장 효과적입니다.
인코딩 전 압축하기
Base64는 파일 크기를 약 33% 증가시키므로, 최종 인코딩 문자열을 최대한 작게 유지하려면 항상 먼저 이미지를 압축하세요. Picovert의 이미지 압축기는 눈에 띄는 품질 저하 없이 JPEG, PNG, WebP 파일 크기를 크게 줄여줍니다. 200KB 이미지를 60KB로 압축하면 Base64 문자열이 약 267KB 대신 ~80KB가 됩니다. HTML 문서나 JSON 페이로드 안에 포함될 때 이는 의미 있는 차이입니다.
정리하면: Base64는 이메일 HTML, 소형 아이콘, API 페이로드처럼 자립적이고 서버 독립적인 이미지가 필요할 때 적합한 도구입니다. 그 외에는 일반 파일 URL을 사용하여 페이지 로드 속도를 빠르게 유지하고 브라우저 캐싱을 활용하세요. 그리고 Base64를 사용할 때는 항상 먼저 압축하세요.