이미지 → Base64 변환
이미지를 Base64 data URI로 인코딩해서 HTML/CSS에 인라인으로 임베딩할 수 있는 코드를 만들어줍니다. 작은 아이콘·로고·이메일 시그니처 첨부에 사용하세요.
사용 방법
드래그/클릭/Ctrl+V로 이미지를 가져오세요. PNG, JPG, GIF, WebP, SVG, ICO, BMP 모두 지원합니다.
data URI, HTML <img> 태그, CSS background-image 코드가 자동으로 생성됩니다. 미리보기와 원본/Base64 크기 비교도 함께 표시.
필요한 형식(URI / HTML / CSS) 옆의 "복사" 버튼으로 한 번에 클립보드에 복사할 수 있습니다.
자주 묻는 질문
Base64 인코딩이 무엇인가요?
바이너리 데이터(이미지·파일)를 ASCII 텍스트로 표현하는 방식입니다. 64개 문자(A-Z, a-z, 0-9, +, /, =)만 사용하므로 텍스트 기반 환경(HTML, CSS, JSON, 이메일)에 안전하게 임베딩할 수 있습니다.
왜 Base64로 인코딩하나요?
단일 HTTP 요청 줄이기(작은 아이콘은 별도 다운로드 안 함), 오프라인 작동(이미지가 코드에 포함됨), 이메일 인라인 첨부 등에 사용됩니다. 단, 파일 크기가 ~33% 커지므로 캐싱이 중요한 큰 이미지에는 부적합합니다.
얼마나 큰 이미지까지 가능?
브라우저 메모리 한계까지 가능하지만 권장은 100KB 이하의 작은 이미지입니다. 1MB 이상은 Base64 후 ~1.33MB가 되어 페이지 초기 로딩이 매우 느려질 수 있습니다.
CSS에서 어떻게 사용?
`background-image: url(data:image/png;base64,...)` 형태로 사용합니다. "CSS" 출력란의 코드를 복사해서 그대로 쓸 수 있습니다. SVG는 더 효율적인 `data:image/svg+xml,...` 인코딩도 가능하지만 본 도구는 모두 Base64로 통일합니다.
데이터가 서버에 전송되나요?
아닙니다. FileReader API로 브라우저에서만 인코딩이 이루어지며, 이미지가 외부로 전송되지 않습니다.
