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로 변환합니다 — 업로드, 서버, 계정이 필요 없습니다.

즉시 변환
이미지를 드래그 앤 드롭하거나 파일을 선택하면 전체 data URI가 즉시 표시됩니다. 서버 처리를 기다릴 필요 없이 — FileReader API가 모든 것을 로컬에서 처리합니다.
🔒
개인정보 보호 우선 처리
이미지가 기기를 벗어나지 않습니다. 인코딩은 네이티브 FileReader.readAsDataURL() 메서드를 사용하여 브라우저에서 완전히 실행됩니다. 어떤 서버에도 데이터가 전송되지 않습니다.
🌐
모든 주요 형식 지원
PNG, JPEG, SVG, WebP, GIF, ICO, BMP 및 브라우저가 지원하는 기타 모든 이미지 형식을 허용합니다. MIME 타입은 파일에서 자동으로 감지됩니다.
📦
즉시 복사 가능한 출력
출력은 완전한 data URI 문자열입니다 — HTML img src, CSS url() 선언, 또는 JSON 페이로드에 별도의 수동 형식 지정 없이 직접 붙여넣을 수 있습니다.

Base64 이미지 인코딩 사용 사례

프론트엔드 개발
작은 아이콘과 UI 에셋을 HTML 또는 CSS에 직접 포함하여 HTTP 요청을 제거합니다. 이는 중요한 화면 상단 이미지의 워터폴 지연을 줄여 LCP(Largest Contentful Paint) 점수를 향상시킵니다.
HTML 이메일 템플릿
많은 이메일 클라이언트는 기본적으로 외부 이미지를 차단합니다. 인라인 Base64 이미지는 수신자가 "이미지 불러오기"를 클릭할 필요 없이 즉시 렌더링되어 오픈율과 시각적 일관성을 개선합니다.
단일 페이지 애플리케이션
JavaScript 또는 CSS에서 작은 에셋을 data URI로 번들링하여 네트워크 요청 수를 줄입니다. Webpack과 Vite 모두 설정 가능한 크기 임계값 이하의 에셋에 대해 자동 Base64 인라이닝을 지원합니다.
API 및 JSON 페이로드
사용자 아바타, 서명 또는 썸네일을 Base64 문자열로 인코딩하여 JSON API 응답에 직접 포함합니다. 작은 이미지를 위한 별도의 파일 호스팅 엔드포인트가 필요 없어집니다.
문서 및 Markdown
다이어그램이나 스크린샷을 Markdown 파일이나 README 문서에 data URI로 포함합니다. 이미지가 문서와 함께 이동하며 외부 호스팅 없이 올바르게 표시됩니다.
테스트 및 프로토타이핑
테스트 픽스처, Storybook 스토리, 또는 프로토타입 HTML 파일에서 Base64 data URI를 플레이스홀더 이미지로 사용합니다. 초기 개발 중에 정적 파일 서버를 설정하거나 이미지 에셋을 관리할 필요가 없습니다.

Data URI 구조

Data URI는 이미지 형식과 이진 콘텐츠를 하나의 문자열로 인코딩합니다. 구조를 이해하면 프로그래밍 방식으로 data URI를 구성하거나 파싱할 때 도움이 됩니다:

구성 요소설명
data:URI scheme identifier
image/pngMIME type of the image
;base64,Encoding declaration
iVBORw0KGgo...Base64-encoded binary data

Base64 인코딩을 위한 이미지 형식 비교

이미지 형식의 선택은 Base64 출력 크기, 브라우저 지원 및 렌더링 특성에 영향을 미칩니다. 콘텐츠 유형에 가장 적합한 형식을 사용하세요:

형식MIME 타입투명도최적 용도
PNGimage/pngYesScreenshots, icons, UI elements
JPEGimage/jpegNoPhotos, gradients, large images
SVGimage/svg+xmlYesLogos, icons, scalable graphics
WebPimage/webpYesModern web images, smaller files
GIFimage/gifYes (1-bit)Simple animations, small icons
ICOimage/x-iconYesFavicons

코드 예제

인기 있는 언어 및 환경에서 이미지를 Base64 data URI로 변환하는 방법:

JavaScript (browser)
// 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..."
Python
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}'
Node.js
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')}`
}
CLI (bash)
# 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)"

자주 묻는 질문

Base64 인코딩의 최대 이미지 크기는 얼마인가요?
Base64 사양 자체에는 엄격한 제한이 없습니다. 브라우저의 data URI 지원은 다양합니다: 대부분의 최신 브라우저는 수 메가바이트까지의 data URI를 처리합니다. 그러나 Base64 인코딩은 크기를 33% 증가시키므로 1 MB 이미지는 약 1.33 MB의 텍스트가 됩니다. 10-20 KB보다 큰 이미지의 경우 적절한 캐싱과 함께 별도 파일로 제공하는 것이 더 효율적입니다.
Base64 인코딩이 이미지 품질을 저하시키나요?
아니요. Base64는 손실 없는 인코딩입니다 — 콘텐츠를 변경하지 않고 이진 데이터를 텍스트로 변환합니다. 디코딩된 데이터는 원본 파일과 바이트 단위로 동일합니다. 품질 손실은 Base64 인코딩이 아닌 이미지 형식 자체(예: JPEG 압축)에서 비롯됩니다.
Base64 인코딩된 출력이 원본 이미지보다 큰 이유는 무엇인가요?
Base64는 3바이트의 이진 데이터를 4개의 ASCII 문자로 표현하여 33%의 크기 증가가 발생합니다. Data URI에는 약 25-30자의 접두사(예: data:image/png;base64,)도 추가됩니다. 작은 이미지(2-5 KB 미만)의 경우 이 오버헤드는 HTTP 요청을 제거함으로써 상쇄됩니다. 큰 이미지의 경우 크기 페널티로 인해 외부 파일이 더 효율적입니다.
CSS background-image에 Base64 이미지를 사용할 수 있나요?
네. url() 함수의 값으로 data URI를 사용하세요: background-image: url('data:image/png;base64,...'). 이는 모든 최신 브라우저에서 작동합니다. HTTP 요청을 피하는 것이 약간 더 큰 CSS 파일의 가치가 있는 작고 자주 사용되는 배경 패턴이나 아이콘에 가장 효과적입니다.
민감한 이미지에 Base64 이미지 인코딩이 안전한가요?
Base64는 암호화가 아닌 인코딩입니다. Data URI를 볼 수 있는 누구든지 원본 이미지로 디코딩할 수 있습니다. 기밀 이미지를 보호하기 위해 Base64에 의존하지 마세요. 이 도구는 이미지를 브라우저에서 완전히 처리합니다 — 어떤 서버에도 데이터가 전송되지 않습니다 — 그러나 결과 data URI는 HTML 또는 CSS 소스에 접근할 수 있는 누구나 읽을 수 있는 일반 텍스트입니다.
Base64 data URI를 다시 이미지 파일로 변환하려면 어떻게 하나요?
JavaScript에서는 data URI와 함께 fetch()를 사용하고 응답에서 blob()을 호출한 후 다운로드 링크를 만드세요. Python에서는 쉼표에서 문자열을 분리하고 base64.b64decode()로 Base64 부분을 디코딩한 후 바이트를 파일에 쓰세요. 이 사이트의 Base64 이미지 디코더 도구를 사용할 수도 있습니다.
웹사이트의 모든 이미지를 Base64로 인코딩해야 하나요?
아니요. Base64 인라이닝은 HTTP 요청 오버헤드가 33% 크기 페널티를 초과하는 작은 이미지(아이콘, 로고, 1x1 픽셀)에 유리합니다. 더 큰 이미지의 경우 적절한 캐시 헤더가 있는 별도 파일을 사용하세요 — 브라우저가 독립적으로 캐싱하고 병렬로 로드할 수 있습니다. 일반적인 임계값은 2-8 KB입니다: 이 크기 이하의 이미지는 인라이닝이 유리하고, 더 큰 이미지는 외부 파일로 제공해야 합니다.