IMG이미지 Base64 변환

이미지 Base64 변환 완벽 가이드

이미지 Base64 변환기는 PNG, JPG, GIF, WebP 등 이미지를 Base64 인코딩된 데이터 URI 문자열로 변환합니다. HTML <img>·CSS background-image에 외부 파일 없이 직접 임베딩하거나, JSON·API 페이로드에 이미지를 포함할 때 사용합니다. 모든 변환은 브라우저 내에서 처리되어 이미지가 서버에 업로드되지 않습니다.

Base64 이미지 임베딩 이해하기

Data URI 형식

변환 결과는 다음 형식의 Data URI입니다:

data:[MIME타입];base64,[Base64 인코딩된 데이터]

// 예시
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

HTML과 CSS에서 활용

<!-- HTML img 태그 -->
<img src="data:image/png;base64,iVBOR..." alt="icon" width="32" />

/* CSS background-image */
.icon {
  background-image: url('data:image/png;base64,iVBOR...');
  width: 32px;
  height: 32px;
}

/* SVG 인라인 */
background-image: url("data:image/svg+xml,%3Csvg...");

파일 크기 33% 증가 — 트레이드오프

Base64는 3바이트를 4개의 ASCII 문자로 인코딩하므로 원본 대비 약 33% 크기가 증가합니다. 작은 아이콘(1~5KB)이나 SVG는 인라인 임베딩으로 HTTP 요청을 줄이는 이점이 크지만, 배경 사진 등 큰 이미지는 외부 파일로 제공하는 것이 로딩 성능에 유리합니다.

언제 Base64를 써야 하나?

• 파비콘·작은 아이콘: HTTP 요청 절감
• 이메일 HTML: 외부 이미지 차단 환경에서 인라인 이미지
• 오프라인/PWA: 네트워크 없이 이미지 표시
• API 페이로드: JSON에 이미지 데이터 포함
• Canvas / WebGL: 데이터 URL로 이미지 로드

실전 예시: 이메일 인라인 이미지

HTML 이메일 클라이언트는 외부 이미지 로딩을 차단하는 경우가 많습니다. 로고나 배너 이미지를 Base64로 변환해 <img src="data:..."> 형식으로 삽입하면 이메일이 외부 리소스 없이도 이미지를 표시합니다.