Base64 이미지 변환
🖼️ 이미지이미지 파일을 Base64 텍스트로 인코딩하고, 반대로 Base64 코드를 이미지로 복원하는 도구입니다.
이미지 업로드
JPG, PNG, GIF, WebP 파일 지원
최대 10MB
사용 예시
- • CSS: background-image: url(data:image/png;base64,...);
- • HTML: <img src="data:image/png;base64,..." />
- • JSON: 이미지를 텍스트로 저장/전송
🖼️ Base64 이미지 변환이란?
이미지를 텍스트 문자열로 인코딩/디코딩하는 도구. Base64로 변환된 이미지는 HTML/CSS/JavaScript 코드에 직접 삽입할 수 있어 외부 파일 의존성을 줄입니다. 이메일 템플릿, 단일 HTML 배포, API 데이터 전송에 널리 쓰이며, 처리는 전부 브라우저에서 이뤄져 외부 서버로 전송되지 않습니다.
📋 이미지 형식별 Base64 시그니처
| 형식 | MIME 타입 | Base64 시작 문자 |
|---|---|---|
| JPEG | image/jpeg | /9j/ |
| PNG | image/png | iVBOR |
| GIF | image/gif | R0lGOD |
| WebP | image/webp | UklGR |
💡 Base64 이미지 활용 팁
- 작은 이미지에 적합 — 아이콘/로고 등 10KB 미만 권장
- Data URL 접두사 — CSS/HTML 사용 시
data:image/...형식 필요 - 용량 증가 — 인코딩 시 원본 대비 약 33% 증가
- 캐싱 불가 — 인라인 이미지는 브라우저 캐싱 불가, 반복 다운로드
- 이메일 첨부 — HTML 이메일 직접 삽입에 유용
⚠️ 주의
큰 이미지는 외부 파일로 두는 게 낫습니다. 인라인 Base64는 캐싱이 안 돼 페이지 로딩이 느려집니다.
자주 묻는 질문
Base64 인코딩하면 이미지가 커지나요?▼
네, Base64 인코딩은 바이너리를 텍스트로 변환하므로 약 33% 정도 용량이 증가합니다. 작은 이미지에 적합합니다.
Data URL 접두사는 언제 필요한가요?▼
HTML img 태그의 src나 CSS background-image에 직접 사용할 때는 data:image/...;base64, 접두사가 필요합니다. API 전송 시에는 순수 Base64만 사용하기도 합니다.
Base64 문자열에서 이미지 형식을 알 수 있나요?▼
네, Base64 시작 문자로 이미지 형식을 추측할 수 있습니다. 이 도구는 /9j/(JPEG), iVBOR(PNG) 등 시그니처를 자동 감지합니다.