Drag & drop or click the upload zone to select a JPG, PNG, GIF, WebP, SVG, or ICO file.
2. Choose output format
Pick Raw Base64, Data URL, HTML <img> tag, or CSS background-image depending on your use case.
3. Review the output
The encoded string appears in the output box. Check file info to see original and Base64 sizes.
4. Copy and use
Click Copy to copy to clipboard, then paste directly into your HTML, CSS, or JSON file.
사용 방법
1. 이미지 업로드
드래그 앤 드롭하거나 업로드 영역을 클릭해 JPG, PNG, GIF, WebP, SVG, ICO 파일을 선택하세요.
2. 출력 형식 선택
Raw Base64, Data URL, HTML <img> 태그, CSS background-image 중 용도에 맞는 형식을 선택하세요.
3. 결과 확인
인코딩된 문자열이 출력 박스에 표시됩니다. 파일 정보에서 원본 크기와 Base64 크기를 확인할 수 있습니다.
4. 복사 및 사용
복사 버튼을 클릭해 클립보드에 복사한 뒤 HTML, CSS, JSON 파일에 바로 붙여넣으세요.
FAQ
No. Everything runs entirely in your browser using the FileReader API. Your image never leaves your device.
A Data URL embeds the image directly in your HTML or CSS as a data:image/...;base64,... string. It is useful for small icons, logos, or images that need to be bundled without a separate HTTP request. Avoid it for large images as it bloats page size.
Base64 encoding converts every 3 bytes of binary data into 4 ASCII characters, which increases the size by approximately 33%.
JPG, PNG, GIF, WebP, SVG, and ICO. Any image format your browser can read will work, since encoding is done with the browser's native FileReader API.
Generally keep images under 10–20 KB for inline use. This tool shows a warning for images over 100 KB, as large inline images significantly increase page weight and may hurt performance.
자주 묻는 질문
아니요. 모든 처리는 브라우저의 FileReader API를 이용해 로컬에서만 이루어집니다. 이미지 데이터는 기기 밖으로 나가지 않습니다.
Data URL은 이미지를 data:image/...;base64,... 형식의 문자열로 HTML/CSS에 직접 삽입하는 방식입니다. 별도 HTTP 요청 없이 작은 아이콘이나 로고를 번들링할 때 유용합니다. 큰 이미지에는 페이지 크기가 늘어나므로 권장하지 않습니다.
Base64 인코딩은 바이너리 데이터 3바이트를 ASCII 문자 4개로 변환하므로 크기가 약 33% 증가합니다.
JPG, PNG, GIF, WebP, SVG, ICO를 지원합니다. 브라우저의 FileReader API로 처리하므로 브라우저가 읽을 수 있는 이미지 형식은 모두 작동합니다.
인라인 삽입 시 10–20 KB 이하를 권장합니다. 이 툴은 100 KB 초과 이미지에 경고를 표시하며, 큰 이미지를 인라인으로 사용하면 페이지 로드 성능에 부정적인 영향을 줍니다.