Base64 이미지 변환

Base64 입력0 이름 *

브라우저에서 직접 Base64 인코딩 데이터를 미리보기 가능한 이미지로 복원하고 다운로드할 수 있으며, PNG/JPG/WebP/GIF/SVG 등 7가지 이상 일반적인 이미지 형식을 지원합니다. Data URL 접두사를 자동으로 인식하고 브라우저 내에서 바로 미리보기를 제공하여 API 디버깅과 인코딩 검증에 적합합니다.

관련 추천

Base64 이미지 변환이란?

Base64 이미지 변환은 Base64 인코딩의 역과정입니다. Base64로 인코딩된 문자열을 원본 바이너리 이미지 데이터(PNG/JPG/WebP/GIF/SVG 등 형식)로 복원한 뒤 브라우저 내에서 바로 미리보거나 로컬 이미지 파일로 다운로드할 수 있습니다. API 반환 이미지, 인라인 리소스(Data URL), 메일 첨부 파일 Base64 등을 처리할 때 필수적입니다.

**핵심 원리:** Base64는 바이너리 데이터를 64개의 출력 가능한 ASCII 문자(A-Z, a-z, 0-9, +, /)로 인코딩합니다. 이미지로 변환하는 과정은 이 ASCII 문자열을 다시 원본 바이너리 바이트 스트림으로 복원한 뒤, 브라우저가 지정된 MIME 유형(image/png 등)에 따라 이미지 픽셀로 파싱하여 표시하는 것입니다. Data URL(예: `data:image/png;base64,iVBORw0KGgo...`)은 Base64와 MIME 접두사가 결합된 형태로, 자동으로 인식하여 처리합니다.

**주요 사용 사례:** ①API 디버깅: 많은 API가 이미지 인증 코드, 사용자 프로필 사진, 전자 서명을 Base64 문자열로 직접 반환하므로 프런트엔드에서 복원하여 확인해야 합니다; ②프런트엔드 개발: Data URL로 삽입된 작은 아이콘(CSS background-image: url(data:image/png;base64,...))을 붙여넣어 실제 효과를 확인할 수 있습니다; ③메일 첨부 파일 복원: MIME Base64로 인코딩된 첨부 파일을 디코딩하여 원본 이미지로 저장할 수 있습니다; ④크롤러 데이터: 크롤링한 이미지 Base64를 디코딩하여 로컬 파일로 저장할 수 있습니다; ⑤OCR 전처리: 디코딩 후 OCR 도구로 이미지 내용을 인식할 수 있습니다.

**지원하는 이미지 형식:** 브라우저가 기본적으로 인식하는 모든 이미지 MIME 유형을 지원합니다: PNG(image/png), JPG/JPEG(image/jpeg), WebP(image/webp), GIF(image/gif), SVG(image/svg+xml), BMP(image/bmp), AVIF(image/avif), ICO(image/x-icon) 등. 각 형식마다 압축 알고리즘과 적용 분야가 다릅니다: PNG는 무손실로 아이콘과 스크린샷에 적합하고, JPG는 손실 압축으로 사진에 적합하며, WebP는 현대 브라우저에서 권장되고, SVG는 벡터로 아이콘과 로고에 적합합니다.

**디코딩 보안:** 모든 디코딩 작업은 브라우저 내에서 JavaScript로 수행됩니다(`atob()` + `TextDecoder` 또는 `Blob` API 기반). 이미지 바이너리 데이터는 어떤 서버에도 업로드되지 않습니다. 사용자 프로필 사진, 내부 스크린샷 등 민감한 정보가 포함된 Base64 문자열도 안심하고 사용할 수 있으며, 페이지를 닫으면 모든 데이터가 자동으로 삭제됩니다.

사용 사례

  • API가 반환한 Base64 이미지 데이터를 미리보고 다운로드 가능한 이미지 파일로 복원
  • 프런트엔드 인라인 이미지 리소스(Data URL 형식)가 올바르게 인코딩되었는지 검증
  • 이미지 업로드 인터페이스를 디버깅할 때 Base64 내용이 완전한지 확인
  • Base64 이미지를 디자인이나 문서에 사용하기 위해 로컬 PNG/JPG 파일로 저장
  • 메일 첨부 파일 Base64 인코딩을 디코딩하여 이미지로 복원
  • 크롤러가 수집한 이미지 Base64를 복원하여 디스크에 저장
  • Data URL을 디코딩하여 SVG 아이콘의 실제 렌더링 효과 검증
  • OCR/AI 인터페이스가 반환한 Base64 이미지를 복원하여 로컬 파일로 확인

이용 방법

  1. Base64로 인코딩된 이미지 데이터를 붙여넣습니다(Data URL 접두사 유무 모두 지원, 예: data:image/png;base64,iVBORw0KG...)
  2. MIME 유형을 자동으로 감지하여 디코딩합니다(Data URL에서 식별하거나 내용 헤더로 스니핑)
  3. 오른쪽에 이미지 미리보기와 파일 크기, 치수 정보가 실시간으로 표시됩니다
  4. '다운로드'를 클릭하여 로컬 이미지 파일로 저장하거나, 이미지를 우클릭하여 '다른 이름으로 이미지 저장'을 선택합니다
  5. 디코딩에 실패하면 MIME 유형을 수동으로 지정하거나 Base64 Clean 도구로 전처리할 수 있습니다

주요 기능

  • 온라인 이미지 미리보기: 디코딩 후 브라우저 내에서 바로 이미지를 표시하며, 로컬에 다운로드할 필요가 없습니다
  • 다양한 형식 지원: PNG/JPG/WebP/GIF/SVG/BMP/AVIF 등 7가지 이상 일반적인 이미지 MIME 유형을 지원합니다
  • Data URL 자동 인식: data:image/png;base64, 접두사를 자동으로 제거하고 순수 Base64 내용을 추출하여 디코딩합니다
  • 순수 Base64 입력: 접두사 없는 순수 Base64 문자열을 지원하며, MIME 유형을 지정할 수 있습니다
  • 이미지 파일 다운로드: 디코딩된 이미지를 로컬 PNG/JPG 파일로 한 번에 저장할 수 있습니다
  • 실시간 문자 수 통계: 입력 문자 수, 디코딩 후 바이트 수를 실시간으로 표시하여 이미지 크기를 평가하기 편리합니다
  • 오류 감지: 디코딩 실패 시 구체적인 오류 위치(유효하지 않은 Base64 문자, 길이 불일치, MIME 불일치)를 알려줍니다
  • 브라우저 로컬 처리: 모든 디코딩과 미리보기가 브라우저 내에서 완료되며, 어떤 서버도 거치지 않습니다
  • 완전한 양방향 호환: '이미지 Base64 변환'과 페어로 사용하여 완전한 양방향 변환 워크플로우를 구성합니다

코드 예제

JavaScript: 브라우저 기본 디코딩 + Blob URL 미리보기

javascript

브라우저 기본 atob() + TextDecoder + Blob API로 Base64를 디코딩하고 브라우저 내에서 이미지를 표시합니다.

// Base64 → 이미지(브라우저 기본 구현)
function base64ToImage(base64String, mimeType = 'image/png') {
  // 1. Data URL 접두사 제거(있는 경우)
  const clean = base64String.replace(/^data:image\/\w+;base64,/, '');

  // 2. 브라우저 기본 atob()로 바이너리 문자열 디코딩
  const binary = atob(clean);

  // 3. Uint8Array로 변환
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }

  // 4. <img> 태그 미리보기용 Blob URL 생성
  const blob = new Blob([bytes], { type: mimeType });
  const url = URL.createObjectURL(blob);

  // 5. img.src를 설정하면 미리보기 가능
  const img = document.createElement('img');
  img.src = url;
  img.onload = () => {
    console.log(`이미지 크기: ${img.width}x${img.height}`);
    console.log(`파일 크기: ${bytes.byteLength} bytes`);
  };

  return { img, url, size: bytes.byteLength };
}

// 사용 예시:
const result = base64ToImage('iVBORw0KGgoAAAANSUhEUgAAAAUA...');
document.body.appendChild(result.img);

// Blob URL 해제(메모리 누수 방지)
setTimeout(() => URL.revokeObjectURL(result.url), 60000);

Python: base64 라이브러리로 디코딩하고 이미지 저장

python

Python 표준 라이브러리 base64로 Base64 데이터를 이미지 바이너리 스트림으로 디코딩한 뒤 PIL/Pillow나 내장 파일 조작으로 저장합니다.

import base64
from pathlib import Path

def base64_to_image(base64_string: str, output_path: str, mime_type: str = 'image/png'):
    """Base64 문자열을 디코딩하여 이미지 파일로 저장"""

    # 1. Data URL 접두사 제거
    if base64_string.startswith('data:image'):
        # 형식: data:image/png;base64,iVBORw0...
        header, base64_string = base64_string.split(',', 1)
        # header에서 MIME 자동 추출
        if 'image/' in header:
            mime_type = header.split('data:')[1].split(';')[0]

    # 2. 디코딩
    image_bytes = base64.b64decode(base64_string)

    # 3. 파일로 저장
    output_file = Path(output_path)
    output_file.parent.mkdir(parents=True, exist_ok=True)
    output_file.write_bytes(image_bytes)

    print(f"✅ 저장 완료: {output_file}")
    print(f"   파일 크기: {len(image_bytes):,} bytes")
    print(f"   MIME 유형: {mime_type}")

    return output_file


# 사용 예시:
# 1. API 응답에서 가져온 Base64 문자열
api_base64_response = "iVBORw0KGgoAAAANSUhEUgAA..."

# 2. 디코딩하여 저장
base64_to_image(api_base64_response, 'output/captcha.png')

# 3. 선택: PIL로 추가 처리
try:
    from PIL import Image
    img = Image.open('output/captcha.png')
    print(f"이미지 크기: {img.size}")
    img.save('output/captcha.png', optimize=True)
except ImportError:
    print('이미지 처리하려면 Pillow 설치: pip install Pillow')

Java: java.util.Base64 + ImageIO로 이미지 디코딩

java

Java 표준 라이브러리 Base64로 이미지 바이너리 스트림을 디코딩하고 ImageIO/BufferedImage로 이미지 메타데이터를 처리합니다.

import java.io.*;
import java.util.Base64;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;

public class Base64ToImage {
    public static void main(String[] args) throws Exception {
        String base64String = "iVBORw0KGgoAAAANSUhEUgAA...";
        String mimeType = "image/png";

        // 1. Data URL 접두사 제거(있는 경우)
        if (base64String.startsWith("data:image")) {
            int commaIdx = base64String.indexOf(',');
            String header = base64String.substring(0, commaIdx);
            base64String = base64String.substring(commaIdx + 1);
            // header에서 MIME 추출
            if (header.contains("image/")) {
                mimeType = header.substring(header.indexOf("data:") + 5, header.indexOf(";"));
            }
        }

        // 2. Base64 디코딩
        byte[] imageBytes = Base64.getDecoder().decode(base64String);

        // 3. 파일로 저장
        String extension = mimeType.substring("image/".length());
        File outputFile = new File("output." + extension);
        try (FileOutputStream fos = new FileOutputStream(outputFile)) {
            fos.write(imageBytes);
        }
        System.out.println("✅ 저장 완료: " + outputFile.getAbsolutePath());
        System.out.println("   파일 크기: " + imageBytes.length + " bytes");

        // 4. (선택) 이미지 메타데이터 읽기
        ByteArrayInputStream bais = new ByteArrayInputStream(imageBytes);
        BufferedImage image = ImageIO.read(bais);
        if (image != null) {
            System.out.println("이미지 크기: " + image.getWidth() + "x" + image.getHeight());
        }
    }
}

자주 묻는 질문

어떤 이미지 형식을 지원하나요?

PNG, JPG, WebP, GIF, SVG, BMP, AVIF, ICO 등 브라우저가 기본적으로 인식하는 모든 이미지 MIME 유형을 지원합니다. Data URL의 MIME 접두사나 입력 특징에 따라 자동으로 판단하며, 인터페이스에서 MIME 유형을 수동으로 지정할 수도 있습니다. 올바른 형식을 선택하면 브라우저가 정확하게 디코딩하고 표시할 수 있습니다.

입력에 data:image/png;base64 접두사가 필요한가요?

필요하지 않습니다. 두 가지 형식의 입력을 지원합니다: ①순수 Base64 문자열(예: iVBORw0KGgoAA...)의 경우 인터페이스에서 MIME 유형(PNG/JPG 등)을 선택해야 합니다; ②Data URL 형식(예: data:image/png;base64,iVBORw0KGgo...)의 경우 접두사의 MIME 유형을 자동으로 인식하여 디코딩합니다. 두 입력 방식 모두 지원됩니다.

브라우저에서 바로 미리볼 수 있나요?

네, 가능합니다. 디코딩된 이미지는 Blob URL을 통해 브라우저 내에서 바로 표시되며 온라인 미리보기를 지원합니다. 내용이 정확한지 확인한 후 로컬 파일로 다운로드하거나 Data URL을 복사하여 HTML/CSS에 인라인으로 삽입할 수 있습니다. 전체 미리보기 과정에 네트워크 요청이 필요하지 않습니다.

Base64 파일 변환과 무슨 차이가 있나요?

Base64 이미지 변환은 이미지 형식에 특화되어 최적화되었습니다: ①MIME 유형 자동 인식; ②Blob URL을 통한 브라우저 내 직접 미리보기; ③MIME에 따라 파일 확장자(.png/.jpg 등) 자동 설정; ④이미지 치수 정보 표시. Base64 파일 변환은 범용 도구로, PDF, ZIP, 오디오 등 모든 바이너리 파일의 복원과 다운로드에 적합합니다.

디코딩 후 이미지가 불완전하게 표시되면 어떻게 하나요?

가능한 원인: ①Base64 문자열이 잘림(길이가 완전한지 확인); ②MIME 유형 지정 오류(PNG 데이터를 JPG로 디코딩하는 등); ③원본 데이터 자체가 손상됨. 권장 사항: ①원본 Base64가 완전한지 확인; ②다른 MIME 유형으로 전환해 보기; ③Base64 Validate 도구로 유효성 검사.

Base64 용량이 원본 이미지보다 얼마나 커지나요?

Base64 인코딩은 원본 바이너리 데이터 용량을 약 33% 증가시킵니다(3바이트 → 4문자). 예를 들어 100KB PNG는 인코딩 후 약 133KB Base64 문자열이 됩니다. 따라서 Base64는 작은 이미지(<10KB)에 적합하며, 큰 이미지는 HTTP URL로 직접 전송하는 것이 좋습니다.

SVG 벡터 이미지를 지원하나요?

네, 지원합니다. SVG는 XML 기반 벡터 이미지 형식으로, Base64 인코딩 후 HTML <img>나 CSS background-image에 직접 삽입할 수 있습니다. 디코딩 후 브라우저 내에서 벡터 방식으로 렌더링되며 무손실로 확대/축소할 수 있습니다. SVG에 JavaScript 코드가 포함될 수 있으므로 사용 시 XSS 보안에 주의해야 합니다.

지정된 형식으로 저장하려면 어떻게 하나요?

디코딩 후 다운로드 버튼을 클릭하면 디코딩 시 MIME 유형에 따라 해당 확장자가 자동으로 추가됩니다(image/png → .png, image/jpeg → .jpg). 형식을 변환해야 하는 경우(예: PNG → JPG), 디코딩 후 다른 도구(Canvas/ImageMagick 등)로 변환하는 것이 좋습니다.

디코딩 후 이미지가 비어 있거나 손상되었어요

일반적인 원인: ①Base64에 줄바꿈이나 공백이 정리되지 않음 — 먼저 Base64 Clean 도구로 전처리; ②패딩(=) 누락 — 이 도구가 자동으로 보완; ③MIME 유형이 원본 데이터와 불일치 — 원본 API가 반환하는 Content-Type을 확인하거나 다른 MIME을 수동으로 시도; ④원본 Base64가 전송 중 잘림 — 완전한 문자열을 다시 가져오기.

큰 이미지(>10MB)를 지원하나요?

지원하지만, 브라우저가 초대형 이미지 렌더링 시 성능이 저하될 수 있습니다. 10MB Base64(약 7.5MB 원본 이미지) 디코딩은 일반적으로 원활하지만, 50MB를 초과하면 메모리 경고가 나타날 수 있습니다. 권장 사항: ①먼저 base64-clean으로 공백 제거; ②큰 이미지를 청크로 나누어 디코딩; ③브라우저 메모리가 충분한지 확인(4GB 이상 권장).

문제 해결

디코딩 후 이미지가 비어 있게 표시됨

MIME 유형이 불일치하거나 Base64가 불완전할 수 있습니다. 확인 사항: 1) 원본 API가 반환하는 Content-Type 헤더; 2) MIME 유형을 수동으로 전환하여 재시도; 3) Base64 문자열이 완전한지 확인(길이가 예상과 일치).

InvalidCharacterError 디코딩 실패

Base64 문자열에 유효하지 않은 문자(공백, 줄바꿈, 한글 등)가 포함되어 있습니다. 먼저 Base64 Clean 도구로 모든 공백과 유효하지 않은 문자를 제거한 뒤 변환하세요.

다운로드한 이미지 확장자가 잘못됨

디코딩 시 MIME 유형이 원본 이미지와 일치하는지 확인하세요. 원본 API가 image/jpeg를 반환하지만 Base64 데이터가 실제로 PNG인 경우, 다운로드 후 확장자는 .jpg이지만 실제 형식은 PNG입니다. MIME 접두사나 Content-Type 헤더에서 원본 형식을 확인하는 것이 좋습니다.

큰 이미지 디코딩 시 브라우저가 멈춤

50MB를 초과하는 Base64 문자열은 메모리 오버플로우를 일으킬 수 있습니다. 권장 사항: ①먼저 base64-clean 도구로 공백 문자 제거; ②큰 이미지를 분할하여 디코딩(예: tile로 분할); ③브라우저 메모리가 충분한지 확인(4GB 이상 가용 메모리 권장); ④초대형 이미지는 서버 측 Node.js/Python 스크립트로 처리.

SVG 이미지가 디코딩 후 표시되지 않음

SVG는 XML 기반 벡터 형식이므로 디코딩 후 다음을 확인해야 합니다: 1) MIME 유형으로 image/svg+xml 사용; 2) SVG에 이스케이프되지 않은 특수 문자가 없어야 함; 3) 일부 브라우저는 SVG의 JavaScript 코드에 보안 제한을 적용. XML 파싱 도구로 SVG 유효성을 먼저 검증하는 것이 좋습니다.

용어집

Base64
64개의 ASCII 문자로 바이너리 데이터를 표현하는 인코딩 방식으로, RFC 4648에 정의되어 있습니다. 이 도구는 역과정으로 Base64 문자열을 원본 이미지 바이너리로 복원합니다.
Data URL
RFC 2397에 정의된 인라인 URL 형식: data:image/<MIME>;base64,<데이터>. HTML img src, CSS background-image에 직접 사용할 수 있습니다. 이 도구는 접두사를 자동으로 인식하고 제거합니다.
MIME 유형
인터넷 미디어 유형으로, image/png, image/jpeg 등이 있습니다. 브라우저는 MIME에 따라 바이트 스트림을 이미지로 파싱하는 방법을 결정합니다.
PNG
무손실 압축 비트맵 형식으로, 투명 채널을 지원합니다. 아이콘, 스크린샷, 디테일을 보존해야 하는 이미지에 주로 사용됩니다. Base64 인코딩 후 용량은 원본의 약 1.33배가 됩니다.
JPG/JPEG
손실 압축 비트맵 형식으로, 사진에 적합합니다. 압축률이 높지만 투명을 지원하지 않습니다. Base64 인코딩 후 용량은 원본의 약 1.33배가 됩니다.
WebP
Google이 개발한 현대 이미지 형식으로, 손실/무손실 압축과 투명 채널을 모두 지원합니다. PNG/JPG보다 25-35% 더 작습니다.
Blob (Binary Large Object)
브라우저 기본 바이너리 객체로, Base64 디코딩 후 바이트 스트림을 이미지 Blob URL로 감싸 미리보기와 다운로드에 사용할 수 있습니다.

8가지 이미지 형식 비교표

이미지 형식마다 압축 알고리즘, 특성, 적용 분야가 다릅니다.

형식MIME 유형압축 유형투명 지원주요 분야
PNGimage/png무손실아이콘/스크린샷/로고
JPGimage/jpeg손실사진/풍경 이미지
WebPimage/webp손실/무손실현대 웹 권장
GIFimage/gif무손실 (256색)✅ (1-bit)작은 애니메이션/단순 아이콘
SVGimage/svg+xml벡터로고/아이콘/일러스트
BMPimage/bmp없음선택Windows 시스템 이미지
AVIFimage/avif손실/무손실차세대 이미지 형식
ICOimage/x-icon무손실웹사이트 favicon

Data URL vs HTTP URL 이미지 로딩 비교

디코딩된 이미지는 Data URL로 HTML/CSS에 직접 삽입할 수 있으며, 기존 HTTP URL과 비교합니다.

차원Data URLHTTP URL
HTTP 요청 수01회
캐시 재사용어려움쉬움(CDN/브라우저)
용량원본 + 33%원본 크기
적합한 크기< 10 KB임의 크기
압축 전송아니오(이미 인코딩됨)gzip/Brotli
CSP 제한가능성 있음일반적으로 허용
서버 스토리지불필요필요
오프라인 접근✅(파일 수준)❌(캐시 필요)

5가지 Base64 이미지 변환 일반 오류 대조표

디코딩 오류가 발생하면 아래 표에 따라 빠르게 문제를 찾으세요.

오류 현상가능한 원인해결 방법
디코딩 실패: InvalidCharacterError공백, 줄바꿈, Base64 외 문자 포함Base64 Clean 도구로 전처리
이미지가 비어 있게 표시됨MIME 유형이 원본 데이터와 불일치올바른 MIME으로 전환(예: PNG 데이터는 image/png 사용)
이미지가 불완전하게 표시됨Base64 문자열이 잘림완전한 Base64 문자열을 다시 가져오기
Padding 오류URL-safe Base64가 padding 생략Base64 Padding 도구로 = 보완
브라우저 메모리 오버플로우이미지가 너무 큼(> 50MB)청크 디코딩 또는 이미지 압축 도구 사용

Authoritative References