이미지 업로드
JPG, PNG, GIF, WebP 파일 지원
최대 10MB
사용 예시
- • CSS: background-image: url(data:image/png;base64,...);
- • HTML: <img src="data:image/png;base64,..." />
- • JSON: 이미지를 텍스트로 저장/전송
🖼️ Base64 이미지 변환이란?
Base64 이미지 변환은 이미지 파일을 텍스트 문자열로 인코딩하거나, 반대로 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/... 형식 필요
- 용량 증가: Base64 인코딩 시 원본 대비 약 33% 크기 증가
- 캐싱 불가: 인라인 이미지는 브라우저 캐싱 불가, 반복 다운로드
- 이메일 첨부: HTML 이메일에 이미지 직접 삽입 시 유용
자주 묻는 질문
Base64 인코딩하면 이미지가 커지나요?▼
네, Base64 인코딩은 바이너리를 텍스트로 변환하므로 약 33% 정도 용량이 증가합니다. 작은 이미지에 적합합니다.
Data URL 접두사는 언제 필요한가요?▼
HTML img 태그의 src나 CSS background-image에 직접 사용할 때는 data:image/...;base64, 접두사가 필요합니다. API 전송 시에는 순수 Base64만 사용하기도 합니다.
Base64 문자열에서 이미지 형식을 알 수 있나요?▼
네, Base64 시작 문자로 이미지 형식을 추측할 수 있습니다. 이 도구는 /9j/(JPEG), iVBOR(PNG) 등 시그니처를 자동 감지합니다.