Base64 이미지 인코더
이미지를 HTML 및 CSS용 Base64 data URI로 인코딩
이미지를 여기에 드래그하거나 클릭하여 업로드
PNG, JPG, SVG, WebP, GIF, AVIF 지원
Base64 이미지 인코딩이란?
Base64 이미지 인코딩은 이진 이미지 데이터를 ASCII 문자열로 변환하여 외부 파일을 참조하지 않고 HTML, CSS 또는 JSON에 직접 포함할 수 있게 합니다. 결과물은 data URI — data:image/png;base64,로 시작하고 이미지의 Base64 인코딩된 바이트가 뒤따르는 자체 포함 문자열입니다. 브라우저는 data URI를 외부 이미지 URL과 동일하게 처리합니다: Base64 페이로드를 디코딩하고 이미지를 인라인으로 렌더링합니다.
이 기법은 RFC 2397(data URI 스킴)과 RFC 4648(Base64 인코딩)에 정의되어 있습니다. 이미지를 Base64로 인코딩하면 3바이트의 이진 픽셀 데이터가 4개의 ASCII 문자가 되어 페이로드 크기가 약 33% 증가합니다. 이 오버헤드에도 불구하고, 인라인 이미지는 에셋당 HTTP 요청을 제거합니다 — 이미지가 작고(아이콘, 로고, 1x1 추적 픽셀) 별도 요청의 왕복 지연이 추가 바이트 비용보다 클 때 의미 있는 최적화입니다.
Data URI는 모든 최신 브라우저, 이메일 클라이언트(주의 사항 있음), 그리고 표준 URI 구문을 허용하는 모든 맥락에서 지원됩니다. 단일 페이지 애플리케이션, HTML 이메일 템플릿, SVG 스프라이트, 그리고 네트워크 요청 수를 줄여 체감 로드 시간을 개선하는 CSS background-image 선언에서 널리 사용됩니다.
이 Base64 이미지 인코더를 사용하는 이유
이 도구는 브라우저에서 직접 모든 이미지를 바로 사용 가능한 data URI로 변환합니다 — 업로드, 서버, 계정이 필요 없습니다.
Base64 이미지 인코딩 사용 사례
Data URI 구조
Data URI는 이미지 형식과 이진 콘텐츠를 하나의 문자열로 인코딩합니다. 구조를 이해하면 프로그래밍 방식으로 data URI를 구성하거나 파싱할 때 도움이 됩니다:
| 구성 요소 | 설명 |
|---|---|
| data: | URI scheme identifier |
| image/png | MIME type of the image |
| ;base64, | Encoding declaration |
| iVBORw0KGgo... | Base64-encoded binary data |
Base64 인코딩을 위한 이미지 형식 비교
이미지 형식의 선택은 Base64 출력 크기, 브라우저 지원 및 렌더링 특성에 영향을 미칩니다. 콘텐츠 유형에 가장 적합한 형식을 사용하세요:
| 형식 | MIME 타입 | 투명도 | 최적 용도 |
|---|---|---|---|
| PNG | image/png | Yes | Screenshots, icons, UI elements |
| JPEG | image/jpeg | No | Photos, gradients, large images |
| SVG | image/svg+xml | Yes | Logos, icons, scalable graphics |
| WebP | image/webp | Yes | Modern web images, smaller files |
| GIF | image/gif | Yes (1-bit) | Simple animations, small icons |
| ICO | image/x-icon | Yes | Favicons |
코드 예제
인기 있는 언어 및 환경에서 이미지를 Base64 data URI로 변환하는 방법:
// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(file)
// reader.result → "data:image/png;base64,iVBORw0KGgo..."
})
}
// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."
// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."import base64
# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
encoded = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."
# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"
with open('photo.jpg', 'rb') as f:
b64 = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:{mime};base64,{b64}'import { readFileSync } from 'fs'
import { lookup } from 'mime-types'
// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"
const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."
// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
return `data:${mimeType};base64,${buf.toString('base64')}`
}# Encode an image to Base64 (macOS) base64 -i logo.png | tr -d '\n' # Encode an image to a full data URI (Linux) echo -n "data:image/png;base64,$(base64 -w 0 logo.png)" # Encode and copy to clipboard (macOS) echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy # Detect MIME type and encode (Linux, requires file command) MIME=$(file -b --mime-type image.webp) echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"