이미지 Base64 변환기 - 무료 온라인 도구
이미지를 Base64 문자열로 즉시 인코딩하세요. PNG·JPG·GIF·WebP·SVG·BMP를 지원하며, 모든 변환이 브라우저 안에서만 이뤄지는 안전하고 무료인 도구입니다.
이미지 업로드
업로드
드래그 앤 드롭 또는 클릭하여 업로드
PNG, JPG, GIF, WebP, SVG, BMP 지원
Base64 출력
Base64 문자열이 여기에 표시됩니다...
Base64 문자열이 여기에 표시됩니다...
이미지를 Base64로 변환하는 방법
드래그 앤 드롭하거나 업로드 영역을 클릭하여 이미지를 업로드합니다.
도구가 이미지를 즉시 Base64 문자열로 변환합니다.
원시 Base64 문자열 또는 HTML/CSS용 Data URI 형식을 복사합니다.
생성된 문자열을 사용하여 코드에 이미지를 직접 삽입합니다.
주요 기능
즉시 변환
서버 업로드 없이 이미지를 즉시 Base64로 변환합니다.
개인 정보 보호 우선
모든 처리는 브라우저에서 로컬로 수행됩니다. 이미지는 장치를 떠나지 않습니다.
모든 형식 지원
PNG, JPEG, GIF, SVG, WebP 및 BMP 형식과 호환됩니다.
Data URI 준비 완료
HTML <img> 태그 또는 CSS background-image에서 직접 사용할 수 있는 완전한 Data URI 문자열을 가져옵니다.
자주 묻는 질문
왜 이미지를 Base64로 변환합니까?
이미지를 Base64로 변환하면 HTML 또는 CSS 파일에 직접 삽입할 수 있어 HTTP 요청 수를 줄이고 작은 이미지의 페이지 로드 시간을 단축할 수 있습니다.
파일 크기 제한이 있습니까?
처리는 브라우저에서 수행되므로 제한은 장치의 메모리에 따라 다릅니다. 그러나 HTML 파일 크기가 커지는 것을 방지하기 위해 Base64는 작은 이미지(아이콘, 로고)에만 사용하는 것이 좋습니다.
품질 손실이 발생합니까?
아니요, Base64 인코딩은 무손실입니다. 디코딩된 이미지는 원본과 동일합니다.
이미지를 도구에 드래그 앤 드롭하거나 클릭하여 선택하면 즉시 Base64 문자열로 인코딩됩니다. 원시 Base64 텍스트와 HTML 또는 CSS에 바로 붙여 넣을 수 있는 Data URI(data:image/png;base64,...) 모두 출력됩니다. PNG·JPG·GIF·WebP·SVG·BMP를 지원하며, 모든 처리는 브라우저 내에서만 진행되어 파일이 외부 서버로 전송되지 않습니다.
이미지를 Base64로 변환하는 방법
- 1
이미지 업로드
파일을 업로드 영역에 드래그하거나 클릭하여 파일을 선택합니다. PNG·JPG·GIF·WebP·SVG·BMP 모두 지원합니다.
- 2
인코딩된 결과 확인
도구가 파일을 로컬에서 읽어 서버 통신 없이 즉시 Base64 문자열을 생성합니다.
- 3
원시 Base64 또는 Data URI 선택
JSON 페이로드에는 원시 Base64 텍스트를, HTML <img> 태그나 CSS background-image에는 Data URI 전체 문자열을 복사하세요.
- 4
코드에 삽입
Data URI를 마크업이나 스타일시트에 직접 붙여 넣으면 이미지가 인라인으로 표시되어 HTTP 요청 하나를 줄일 수 있습니다.
참고 자료
- RFC 2397 — data URL 스킴
Base64 인코딩된 미디어를 인라인으로 삽입하기 위한 data: URL 스킴을 정의한 IETF 사양서.
- MDN — 데이터 URL
Data URL 구문, Base64 인코딩, HTML 및 CSS에서의 이미지 삽입 방법을 설명하는 실용 가이드.
관련 도구
자주 묻는 질문
- 이미지를 Base64로 변환하는 이유는 무엇입니까?
- Base64로 변환하면 이미지를 HTML이나 CSS에 텍스트로 직접 삽입할 수 있어 별도의 HTTP 요청이 불필요합니다. 아이콘이나 소형 로고에 특히 유용합니다.
- 파일 크기 제한이 있습니까?
- 도구 자체에 고정 제한은 없으며, 실제 한계는 브라우저의 메모리입니다. Base64 출력은 원본보다 약 33% 더 크므로 작은 이미지에만 사용하는 것을 권장합니다.
- Base64로 변환하면 화질이 저하됩니까?
- 아닙니다. Base64 인코딩은 완전한 무손실 방식입니다. 디코딩된 이미지는 원본 파일과 바이트 단위로 동일합니다.
- 원시 Base64와 Data URI의 차이점은 무엇입니까?
- 원시 Base64는 인코딩된 문자열 자체입니다. Data URI는 여기에 data:image/png;base64, 접두사를 붙여 브라우저가 MIME 타입을 인식하게 하므로, <img> src 속성이나 CSS background-image에 바로 사용할 수 있습니다.
- 이미지가 서버에 업로드됩니까?
- 아닙니다. 모든 인코딩은 FileReader API를 사용하여 브라우저 내에서 로컬로 처리됩니다. 이미지 데이터는 기기 밖으로 나가지 않습니다.
- CSS에서 Base64 이미지를 사용하려면?
- Data URI를 복사한 후 CSS 파일에서 background-image: url('data:image/png;base64,...'); 의 값으로 붙여 넣으면 됩니다.
- HTML <img> 태그에 Base64 이미지를 삽입하는 방법은?
- Data URI를 <img src="data:image/png;base64,..." /> 형태로 src 속성에 직접 넣으면 외부 파일 없이 이미지가 표시됩니다.