Base64 Image Decoder
Base64 데이터 URI를 이미지로 디코드
Base64 이미지 디코딩이란 무엇입니까?
Base64 이미지 디코딩은 Base64 이미지 인코딩의 역과정입니다. 이미지를 나타내는 Base64 문자열 또는 data URI를 가져와 표시 가능한 이진 픽셀 데이터로 변환합니다. data:image/png;base64,iVBORw0KGgo...와 같은 문자열을 받으면 디코딩은 data URI 접두사를 제거하고, RFC 4648에 정의된 Base64 인코딩을 반전시키며, 원본 이미지 바이트를 재구성합니다. 그러면 브라우저가 디코딩된 바이트를 표시 가능한 이미지로 렌더링할 수 있습니다.
Data URI (RFC 2397)는 MIME 유형과 Base64 인코딩된 콘텐츠를 단일 문자열로 번들합니다. API 응답, HTML 전자 메일 소스 코드, CSS 스타일시트 및 이미지가 이진 파일이 아닌 텍스트로 저장되는 데이터베이스 레코드에 자주 나타납니다. 이러한 문자열을 디코딩하는 것은 이미지를 미리 보고, 그 내용을 확인하고, 독립적인 파일로 저장하기 위해 필요합니다. Base64는 3바이트의 이진 데이터를 나타내기 위해 4개의 ASCII 문자를 사용하므로, 인코딩된 문자열은 항상 원본 이미지보다 약 33% 깁니다.
이 도구는 완전한 data URI (data:image/png;base64,...)와 data: 접두사가 없는 원본 Base64 문자열을 모두 구문 분석합니다. 원본 문자열의 경우, 파일의 매직 바이트에 해당하는 처음 몇 개의 Base64 문자를 검사하여 이미지 형식이 자동으로 감지됩니다. 예를 들어 iVBORw0KGgo는 항상 PNG 파일을 나타냅니다. 디코딩된 이미지는 브라우저에서 직접 렌더링되며 파일로 다운로드할 수 있습니다.
일반적인 개발자 시나리오는 프로필 사진이나 문서 썸네일을 JSON 필드 내 Base64 문자열로 반환하는 REST API로 작업하는 것입니다. 예를 들어 {"avatar": "data:image/png;base64,iVBORw0KGgo..."} 같은 경우입니다. 이미지를 사용하려면 필드 값을 추출하고, 쉼표를 포함하여 data URI 접두사를 제거한 후, 남은 Base64 문자를 JavaScript의 atob() 또는 Python의 base64.b64decode()와 같은 디코더를 통해 전달하여 원본 바이트를 복구합니다. 이 도구에 전체 값을 붙여넣으면 모든 이러한 수동 단계를 건너뛰고 이미지가 즉시 렌더링됩니다.
이 Base64 이미지 디코더를 사용해야 하는 이유는 무엇입니까?
이 도구는 Base64 이미지 데이터를 브라우저에서 완전히 표시 가능하고 다운로드 가능한 이미지로 변환합니다. 업로드 없음, 서버 처리 없음, 계정 필요 없음.
Base64 이미지 디코딩 사용 사례
이미지용 Data URI 구조
data URI는 이미지 유형과 인코딩된 콘텐츠를 단일 문자열로 패킹합니다. 각 구성 요소는 올바른 디코딩에 필수적입니다. 스키마 (data:)는 URL이 외부 리소스에 대한 참조가 아니라 자체 포함되어 있음을 나타냅니다. MIME 유형 (예: image/png)은 렌더러에 원본 바이트를 해석할 때 사용할 형식을 알려줍니다. 마커 ;base64,은 일반 텍스트 형식에 백분율 인코딩을 사용하는 data URI와 Base64 인코딩 콘텐츠를 구분합니다. Base64 페이로드 자체는 1개 또는 2개의 패딩 문자 =로 끝날 수 있습니다. 이들은 입력 바이트 수가 3의 배수가 아닐 때 필요하여 인코딩된 길이가 항상 4의 배수임을 보장합니다. 이러한 구성 요소 중 하나를 생략하거나 자르면 디코딩이 실패하거나 손상된 이미지가 생성됩니다.
| 구성 요소 | 설명 |
|---|---|
| data: | URI scheme identifier |
| image/png | MIME type declaring the image format |
| ;base64, | Encoding declaration (always base64 for binary) |
| iVBORw0KGgo... | Base64-encoded pixel data |
Base64에서 이미지 형식 감지
Base64 문자열에 data: 접두사가 없을 때, 처음 몇 문자를 검사하여 이미지 형식을 식별할 수 있습니다. 이 문자들은 파일의 매직 바이트에 해당합니다. 즉, 각 이미지 파일의 시작 부분에 있는 고정 바이트 시퀀스로 형식을 식별합니다.
| 형식 | Base64 접두사 | 16진수 시그니처 | MIME 유형 |
|---|---|---|---|
| PNG | iVBORw0KGgo | 89 50 4E 47 | image/png |
| JPEG | /9j/ | FF D8 FF | image/jpeg |
| GIF | R0lGOD | 47 49 46 38 | image/gif |
| WebP | UklGR | 52 49 46 46 | image/webp |
| SVG | PHN2Zy | 3C 73 76 67 (text) | image/svg+xml |
| BMP | Qk | 42 4D | image/bmp |
| ICO | AAABAA | 00 00 01 00 | image/x-icon |
코드 예제
인기 있는 프로그래밍 언어 및 환경에서 Base64 이미지 문자열을 이미지 파일로 디코딩하는 방법:
// Decode a Base64 data URI to a Blob and create a download link
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'
// Method 1: fetch API (simplest)
const res = await fetch(dataUri)
const blob = await res.blob()
// blob.type → "image/png", blob.size → 2048
// Method 2: manual decode for older environments
const [header, b64] = dataUri.split(',')
const mime = header.match(/:(.*?);/)[1] // → "image/png"
const binary = atob(b64)
const bytes = Uint8Array.from(binary, c => c.charCodeAt(0))
const blob2 = new Blob([bytes], { type: mime })
// Create a download link
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'decoded.png'
a.click()
URL.revokeObjectURL(url)import base64
import re
data_uri = 'data:image/png;base64,iVBORw0KGgo...'
# Parse the data URI
match = re.match(r'data:(image/[\w+.-]+);base64,(.+)', data_uri)
mime_type = match.group(1) # → "image/png"
b64_data = match.group(2)
# Decode and write to file
image_bytes = base64.b64decode(b64_data)
ext = mime_type.split('/')[1].replace('jpeg', 'jpg').replace('svg+xml', 'svg')
with open(f'output.{ext}', 'wb') as f:
f.write(image_bytes)
# → writes output.png (byte-for-byte identical to the original)
# Decode raw Base64 (no data: prefix)
raw_b64 = 'iVBORw0KGgo...'
image_bytes = base64.b64decode(raw_b64)import { writeFileSync } from 'fs'
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'
// Extract MIME type and Base64 payload
const [meta, b64] = dataUri.split(',')
const mime = meta.match(/:(.*?);/)[1] // → "image/png"
// Decode to Buffer and save
const buffer = Buffer.from(b64, 'base64')
writeFileSync('output.png', buffer)
// → output.png (identical to the original file)
// Validate by checking magic bytes
console.log(buffer.subarray(0, 4))
// PNG → <Buffer 89 50 4e 47> (\x89PNG)
// JPEG → <Buffer ff d8 ff e0># Decode a raw Base64 string to an image file (Linux) echo 'iVBORw0KGgo...' | base64 -d > output.png # Decode a raw Base64 string to an image file (macOS) echo 'iVBORw0KGgo...' | base64 -D > output.png # Extract Base64 from a data URI and decode echo 'data:image/png;base64,iVBORw0KGgo...' | \ sed 's/^data:.*base64,//' | base64 -d > output.png # Identify the image format from the decoded file file output.png # → output.png: PNG image data, 64 x 64, 8-bit/color RGBA