이미지 → Base64
데이터 URI
이미지를 업로드하여 Base64 데이터 URI로 변환합니다. HTML, CSS, JavaScript에 추가 HTTP 요청 없이 직접 삽입할 수 있습니다.
이 변환은 브라우저에서만 실행됩니다. 서버로 업로드하지 않습니다.
이미지를 드래그 앤 드롭하거나 아래에서 선택
PNG, JPEG, GIF, SVG, WebP · 최대 10 MB
UTF-8 텍스트 Base64(이미지 파일 아님)는 Base64 인코더 & 디코더
이 도구는 무엇인가요?
브라우저 FileReader로 로컬 이미지를 읽어 data URI(data:image/…;base64,…) 또는 순수 Base64(페이로드만)를 만듭니다. 복사 전 미리보기로 파일을 확인합니다.
작은 아이콘·데모 HTML·테스트 픽스처에 편리합니다. Base64는 대략 ⅓ 커지고 URL 캐시를 우회하므로, 큰 사진은 CDN·정적 호스팅이 맞고 HTML·이메일 본문 인라인은 피하세요.
최대 10 MB입니다. 인라인이 필요하면 수백 KB 이하로 최적화하세요.
자주 쓰는 경우
- 별도 요청 없이
imgsrc또는 CSSbackground-image: url(…)구성 - HTML 이메일·서명에 작은 로고 삽입(전체 메시지 용량 주의)
- 바이너리 커밋 없이 단위 테스트·Storybook용 Base64 픽스처 생성
사용 방법
- 드롭 영역에 이미지를 놓거나 파일 찾기(PNG, JPEG, GIF, SVG, WebP · 최대 10 MB).
- 미리보기와 MIME·용량 칩을 확인합니다.
- Data URI 또는 순수 Base64를 고른 뒤 복사합니다.
- Sample은 1×1 PNG 스모크 테스트, Clear는 초기화입니다.
예시
| 용도 | 형태 | 메모 |
|---|---|---|
| HTML 이미지 | <img src="data:image/png;base64,…" alt=""> | Data URI 탭; 아이콘은 작게. |
| CSS 배경 | background-image: url("data:image/svg+xml;base64,…") | SVG가 잘 압축되는 편. |
| API·설정 필드 | data: 없는 순수 Base64 | Raw 탭. |
| 이메일 속 큰 사진 | Base64 대신 호스팅 URL | 엣지: 클라이언트 MIME 용량 제한. |
실무에서 흔한 실수
- 이메일 용량: Base64+MIME이 Gmail/Outlook 한도를 넘기기 쉽습니다. 사진은 호스팅하고 인라인은 초소형 아이콘만.
- 큰 data URI는 읽기·렌더 비용을 키웁니다. 약 500 KB 이상이면 UI가 경고합니다.
- 이미지 전용입니다. UTF-8 텍스트 Base64는 텍스트 Base64 도구를 쓰세요.
참고자료
최종 검토: 2026-07-27
자주 묻는 질문
- Data URI와 순수 Base64의 차이는?
- Data URI는 `data:image/png;base64,…` 형태라 `img` `src`나 CSS `url()`에 바로 넣을 수 있습니다. 순수 Base64는 콤마 뒤 인코딩 바이트만이며, `data:` 접두사 없이 Base64만 받는 API·설정에 맞습니다.
- 큰 이미지를 이메일·HTML에 인라인해도 되나요?
- 보통은 비추천입니다. Base64는 약 ⅓ 커지고, 많은 메일 클라이언트가 메시지 용량을 제한합니다. 사진은 호스팅 URL을 쓰고, 인라인은 작은 아이콘·필수 자산에 두세요.
- 이미지가 서버로 업로드되나요?
- 아니요. 브라우저 FileReader로만 읽으며 기기를 떠나지 않습니다.
- 텍스트 Base64 도구와 무엇이 다른가요?
- 이 페이지는 이미지 파일→data URI/순수 Base64입니다. 텍스트 Base64 도구는 API·Basic Auth용 UTF-8 문자열용이며 바이너리 이미지가 아닙니다.