Base64 Image Viewer
Base64로 인코딩된 이미지를 미리보기하고, 이미지 파일을 Base64로 변환하는 도구입니다. 이메일 템플릿, API 응답, 디버깅에 필수!
or paste Base64 data below
💡 Use Cases
🔍 Debug Base64 Data
Quickly verify Base64-encoded images in your code or API responses
📧 Email Templates
Preview Base64 images embedded in HTML emails
🔄 Convert & Download
Convert Base64 back to image files for easy sharing
🧪 Testing
Test image handling in your applications
📝 Tips:
- Base64 data can start with
data:image/png;base64,or just the encoded string - Supported formats: PNG, JPEG, GIF, WebP, SVG
- Large images will result in very long Base64 strings
- Base64 encoding increases file size by ~33%
주요 기능
1. Base64 이미지 미리보기
- Base64 문자열을 붙여넣으면 즉시 이미지로 표시
- 이미지 크기, 포맷, 파일 크기 정보 확인
- 자동 이미지 포맷 감지 (PNG, JPEG, GIF, WebP, SVG)
2. 이미지 업로드 & 변환
- 이미지 파일을 드래그 앤 드롭 또는 선택
- 자동으로 Base64로 인코딩
- Data URI 형식으로 출력
3. 다운로드
- Base64 이미지를 파일로 다시 저장
- 원본 파일명 유지
언제 사용하나요?
API 디버깅
// API 응답에 Base64 이미지가 있을 때
const response = await fetch('/api/user/avatar');
const data = await response.json();
console.log(data.avatar);
// "data:image/png;base64,iVBORw0KGgoAAAANS..."
// Base64 Image Viewer로 붙여넣어서 실제 이미지 확인
HTML 이메일 템플릿
<!-- 이메일에 이미지를 직접 포함 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Logo" />
<!-- Base64 문자열이 올바른지 미리보기로 확인 -->
데이터베이스 저장 이미지
-- DB에 Base64로 저장된 이미지
SELECT avatar_base64 FROM users WHERE id = 123;
-- 결과를 복사해서 Base64 Image Viewer로 확인
프로필 아바타 시스템
// 사용자 프로필 이미지를 Base64로 저장
const handleImageUpload = async (file) => {
const reader = new FileReader();
reader.onload = (e) => {
const base64 = e.target.result;
// Base64 저장 전에 미리보기로 확인
await saveUserAvatar(userId, base64);
};
reader.readAsDataURL(file);
};
실제 사용 예시
1. React 컴포넌트에서 이미지 표시
function UserAvatar({ base64Image }) {
return (
<div className="avatar">
<img
src={base64Image}
alt="User Avatar"
style={{ width: 100, height: 100, borderRadius: '50%' }}
/>
</div>
);
}
// Base64 Image Viewer로 미리 확인한 후 사용
<UserAvatar base64Image="data:image/png;base64,iVBORw0KGgo..." />
2. Canvas에서 이미지 생성
// Canvas를 Base64로 변환
const canvas = document.getElementById('myCanvas');
const base64 = canvas.toDataURL('image/png');
console.log(base64);
// Base64 Image Viewer로 결과 확인
// 서버로 전송
await fetch('/api/save-image', {
method: 'POST',
body: JSON.stringify({ image: base64 })
});
3. 이메일 서비스
// 이메일 템플릿에 로고 포함
const emailTemplate = `
<html>
<body>
<img src="data:image/png;base64,${logoBase64}" alt="Company Logo" />
<h1>Welcome to our service!</h1>
</body>
</html>
`;
// Base64 Image Viewer로 로고가 올바른지 확인
await sendEmail(userEmail, emailTemplate);
4. 모바일 앱 API
// 모바일 앱에서 이미지 업로드
const uploadImage = async (imageFile) => {
const base64 = await fileToBase64(imageFile);
const response = await fetch('/api/upload', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
image: base64,
filename: imageFile.name
})
});
return response.json();
};
// Base64 Image Viewer로 전송 전 이미지 확인
Base64 이미지 포맷
Data URI 구조
data:[<mediatype>][;base64],<data>
예시:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
│ │ │ │
│ │ │ └─ Base64로 인코딩된 이미지 데이터
│ │ └─ Base64 인코딩 명시
│ └─ MIME 타입
└─ Data URI 스킴
지원 이미지 포맷
| 포맷 | MIME Type | Base64 시그니처 |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| GIF | image/gif | R0lGOD |
| WebP | image/webp | UklGR |
| SVG | image/svg+xml | PHN2Zy |
장점과 단점
✅ Base64 이미지의 장점
-
HTTP 요청 감소
<!-- 일반 이미지: 별도 HTTP 요청 -->
<img src="/images/logo.png" />
<!-- Base64: HTML에 포함, 추가 요청 없음 -->
<img src="data:image/png;base64,iVBORw..." /> -
오프라인 작동
- 이미지가 HTML/CSS 파일에 포함되어 있음
- 네트워크 연결 없이도 표시 가능
-
단일 파일 배포
- HTML 파일 하나만 전달하면 됨
- 이미지 파일을 따로 관리할 필요 없음
-
CORS 문제 없음
- 외부 도메인 이미지 로딩 이슈 해결
- Cross-origin 제한 우회
⚠️ Base64 이미지의 단점
-
파일 크기 증가 (~33%)
원본 이미지: 100 KB
Base64 인코딩 후: 133 KB -
캐싱 불가
- 일반 이미지: 브라우저 캐시에 저장
- Base64: HTML이 바뀌면 매번 다시 로드
-
SEO 영향
- 검색 엔진이 이미지를 인덱싱하기 어려움
alt속성으로만 의미 전달
-
처리 오버헤드
- 인코딩/디코딩 시간 소요
- 메모리 사용량 증가
사용 팁
1. 언제 Base64를 사용할까?
✅ Base64 사용 권장:
- 작은 아이콘/로고 (< 10KB)
- 이메일 템플릿
- 자주 변경되지 않는 이미지
- HTTP 요청을 최소화해야 할 때
❌ Base64 사용 지양:
- 큰 이미지 (> 100KB)
- 자주 변경되는 이미지
- SEO가 중요한 콘텐츠 이미지
- 여러 페이지에서 재사용되는 이미지
2. 성능 최적화
// 작은 이미지만 Base64로 변환
const MAX_BASE64_SIZE = 10 * 1024; // 10KB
function shouldConvertToBase64(fileSize) {
return fileSize < MAX_BASE64_SIZE;
}
// 큰 이미지는 서버 업로드
if (shouldConvertToBase64(file.size)) {
const base64 = await fileToBase64(file);
saveToLocalStorage(base64);
} else {
await uploadToServer(file);
}
3. CSS에서 Base64 사용
/* 작은 배경 이미지는 Base64로 */
.icon-home {
background-image: url(data:image/png;base64,iVBORw0K...);
width: 20px;
height: 20px;
}
/* SASS에서 변수로 관리 */
$logo-base64: "data:image/png;base64,iVBORw0K...";
.header {
background-image: url($logo-base64);
}
4. LocalStorage에 저장
// 사용자 아바타를 LocalStorage에 저장
function saveAvatarToLocalStorage(base64) {
try {
localStorage.setItem('userAvatar', base64);
} catch (e) {
if (e.name === 'QuotaExceededError') {
console.error('LocalStorage quota exceeded');
// 압축하거나 서버 저장으로 전환
}
}
}
function getUserAvatar() {
return localStorage.getItem('userAvatar') || DEFAULT_AVATAR;
}
주의사항
1. 파일 크기 제한
// Base64는 원본보다 33% 커짐
const originalSize = 100; // KB
const base64Size = originalSize * 1.33; // 133 KB
// LocalStorage는 5MB 제한
const MAX_LOCALSTORAGE_SIZE = 5 * 1024 * 1024; // 5MB
2. 메모리 누수 주의
// ❌ Bad: 메모리 누수 가능
const images = [];
for (let i = 0; i < 1000; i++) {
images.push(largeBase64Image);
}
// ✅ Good: 필요할 때만 로드
function loadImage(id) {
return fetch(`/api/image/${id}`).then(r => r.json());
}
3. 보안 고려사항
// Base64 이미지도 XSS 공격 가능
// 사용자 입력은 항상 검증
function sanitizeBase64Image(base64) {
// Data URI 형식인지 확인
if (!base64.startsWith('data:image/')) {
throw new Error('Invalid image format');
}
// 허용된 이미지 타입만 허용
const allowedTypes = ['png', 'jpeg', 'jpg', 'gif'];
const mimeType = base64.match(/data:image\/(\w+);/)[1];
if (!allowedTypes.includes(mimeType)) {
throw new Error('Unsupported image type');
}
return base64;
}
변환 유틸리티 함수
File to Base64
function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
reader.readAsDataURL(file);
});
}
// 사용 예제
const file = document.getElementById('fileInput').files[0];
const base64 = await fileToBase64(file);
Base64 to Blob
function base64ToBlob(base64) {
const parts = base64.split(';base64,');
const contentType = parts[0].split(':')[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
// 사용 예제
const blob = base64ToBlob(base64String);
const url = URL.createObjectURL(blob);
Base64 다운로드
function downloadBase64Image(base64, filename = 'image.png') {
const link = document.createElement('a');
link.href = base64;
link.download = filename;
link.click();
}
// 사용 예제
downloadBase64Image(base64String, 'my-image.png');
트러블슈팅
이미지가 표시되지 않음
-
Data URI 형식 확인
// 올바른 형식
const correct = 'data:image/png;base64,iVBORw0K...';
// 잘못된 형식
const wrong1 = 'iVBORw0K...'; // prefix 누락
const wrong2 = 'data:image/png,iVBORw0K...'; // ;base64 누락 -
MIME 타입 확인
- PNG:
data:image/png;base64,... - JPEG:
data:image/jpeg;base64,... - GIF:
data:image/gif;base64,...
- PNG:
-
Base64 데이터 손상
- 복사/붙여넣기 시 줄바꿈 제거
- 공백 문자 제거
"Invalid image data" 오류
// Base64 디코딩 테스트
try {
const base64Data = base64String.split(',')[1];
atob(base64Data);
console.log('Valid Base64');
} catch (e) {
console.error('Invalid Base64 encoding');
}
파일 크기가 너무 큼
// 이미지 압축
async function compressImage(file, maxWidth = 800) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
return new Promise((resolve) => {
img.onload = () => {
const ratio = maxWidth / img.width;
canvas.width = maxWidth;
canvas.height = img.height * ratio;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
resolve(canvas.toDataURL('image/jpeg', 0.8)); // 80% 품질
};
img.src = URL.createObjectURL(file);
});
}
관련 도구
- Base64 Encoder - 텍스트 Base64 인코딩
- Image to Base64 - 이미지 변환 도구
- URL Encoder - URL 인코딩