Developer Utility

Base64 Image Preview

Preview Base64 images or data URLs instantly.

카테고리: Encoding업데이트: 2026-02-17

사용 방법: Base64 문자열 또는 data URL을 넣으면 이미지 미리보기가 표시됩니다.

Input

Base64 문자열 또는 data URL을 넣으면 이미지 미리보기가 표시됩니다.

Output

FAQ

Q. data:image/... 로 시작하지 않아도 되나요?

A. 순수 Base64 문자열도 자동으로 감지합니다.

Q. 지원 포맷은?

A. PNG/JPEG/GIF/WEBP를 자동 감지합니다.

Overview

Base64 이미지 문자열이나 data URL을 입력하면 실제 이미지로 미리보기할 수 있습니다. API 응답이나 이메일 템플릿에서 이미지가 깨질 때 원인을 파악하는 데 유용합니다.

Usage

핵심 기능

Base64 문자열 또는 data:image/... 형식 모두 지원
PNG/JPEG/GIF/WEBP 자동 감지
미리보기와 데이터 URL 출력 동시 제공
브라우저에서만 처리되어 파일 업로드가 없음

사용 방법

Base64 문자열 또는 data URL을 입력합니다.
오른쪽에서 생성된 미리보기를 확인합니다.
필요하면 결과 데이터를 복사하거나 다운로드합니다.

Examples

짧은 Base64 이미지 미리보기

Input

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4//8/AwAI/AL+XnuzGQAAAABJRU5ErkJggg==

Output

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4//8/AwAI/AL+XnuzGQAAAABJRU5ErkJggg==

Tips

이미지가 깨지면 Base64 길이가 잘렸는지 확인하세요.
서버에서 전송할 때는 줄바꿈 없이 한 줄로 유지하는 것이 안전합니다.

Caution

대용량 이미지는 브라우저 메모리 사용량을 크게 늘릴 수 있습니다.
개인정보가 포함된 이미지는 업로드 대신 로컬에서만 테스트하세요.

FAQ

Q. data:image/... 접두사가 꼭 필요한가요?

A. 아니요. 순수 Base64 문자열도 자동으로 이미지로 감지합니다.

Q. 대용량 이미지는 느립니다.

A. 브라우저 메모리 사용량이 증가하므로 큰 이미지는 일부만 테스트하세요.

Data

처리 방식: 입력 문자열을 브라우저에서 이미지로 변환합니다.

저장 여부: 저장하지 않습니다.

이미지에 개인정보가 포함되어 있다면 마스킹 후 사용하세요.

Editorial Notes

이 도구를 쓰는 상황과 자주 하는 실수

언제 유용한가

data URL이나 Base64 이미지가 실제로 복원 가능한지 브라우저에서 바로 확인할 때 유용합니다.
API 응답에 들어 있는 이미지 문자열이 깨졌는지, 접두사가 빠졌는지 점검할 때 적합합니다.

자주 놓치는 포인트

문자열이 너무 길어 중간이 잘렸는데도 포맷만 맞으면 보일 거라고 생각하는 경우가 있습니다.
개인정보가 포함된 이미지까지 외부 테스트 데이터처럼 다루는 것은 피하는 편이 안전합니다.

Trust

도구 운영 기준

이 도구는 DevTool Hub에서 관리하며, 가능한 한 브라우저 안에서 처리하도록 설계합니다. 입력값 저장 여부와 처리 방식은 각 도구 설명에 명시합니다.

정책과 검수 기준은 Editorial Policy에서 확인할 수 있고, 오류 제보나 개선 요청은 Contact에서 받습니다.