이미지 Base64 변환기 무료 온라인 도구
이미지를 Base64 문자열이나 데이터 URI로 온라인 변환하세요. HTML, CSS, JSON, API 페이로드용으로 바로 복사할 수 있으며, 100% 비공개 기기 내 인코딩입니다.
100% 비공개. 업로드되지 않습니다.
3단계로 이미지를 Base64로 변환하는 방법
이미지를 업로드하세요
JPG, PNG, WebP, GIF, SVG 파일을 박스에 끌어다 놓거나 클릭해서 선택하세요. 파일은 기기에서 읽힙니다.
결과 복사하기
전체 데이터 URL(data:image/…;base64,…)과 Base64 문자열만, 그리고 파일 크기와 Base64 크기를 확인할 수 있습니다. 필요한 항목 옆의 복사를 클릭하세요.
코드에 붙여넣기
데이터 URL은 HTML img src나 CSS url()에 사용하세요. JSON 본문과 API 호출에는 원시 Base64 문자열을 사용하세요.
주요 기능
원클릭 복사
데이터 URI와 원시 Base64
- 파일은 기기에만 저장
- JPG, PNG, WebP, GIF, SVG
- 무료, 계정 불필요
Base64로 인코딩된 이미지는 언제 사용해야 할까요?
CSS 및 스타일링
- 작은 아이콘을 CSS에 background-image 데이터 URI로 삽입
- 로딩 스피너나 플레이스홀더 이미지를 스타일시트에 인라인 처리
- 컴포넌트 라이브러리의 UI 아이콘을 CSS 안에 포함
- 별도 파일 없이 SVG 패턴이나 텍스처 추가
HTML 및 문서
- HTML img src에 이미지를 데이터 URI로 인라인 삽입
- 다른 파일 없이 작동하는 단일 파일 HTML 페이지 제작
- 하나의 파일로 공유하는 HTML 보고서에 로고나 차트 추가
- 호스팅 없이 데모와 프로토타입에서 테스트 이미지 표시
API 및 코드
- Base64 텍스트를 기대하는 JSON 페이로드로 이미지 전송
- Base64 입력을 받는 AI 비전 API 요청에 이미지 첨부
- 데이터베이스나 설정 파일의 텍스트 필드에 작은 이미지 저장
- 별도 파일 요청 없이 JavaScript에서 테스트 이미지 불러오기
Base64 이미지 인코딩이란?
Base64 이미지 인코딩은 이미지 파일의 바이트를 A–Z, a–z, 0–9, +, /로 이루어진 64개 문자로 구성된 일반 텍스트로 바꾸는 방식입니다. 이 텍스트는 파일을 넣을 수 없는 HTML, CSS, JSON 안에 들어갈 수 있습니다. 압축이나 형식 변환이 아니며, 이미지는 그대로지만 텍스트 크기는 원본 파일보다 약 3분의 1 더 커집니다.
HTML, CSS, API를 위한 이미지 Base64 변환
변환기는 전체 데이터 URL과 Base64 문자열만, 두 가지를 제공합니다. 각각 어디에 사용하는지, 그리고 이미지를 인라인으로 넣을 가치가 있는 경우를 안내합니다.
HTML이나 CSS에서 Base64 이미지를 어떻게 사용하나요?
HTML과 CSS에는 전체 데이터 URL을 복사하세요. JSON과 대부분의 API에는 Base64 문자열만 복사하세요.
- HTML: 전체 데이터 URL을 img 태그의 src로 붙여넣으세요. 예: src="data:image/png;base64,iVBOR…"
- CSS: 전체 데이터 URL을 url()로 감싸세요. 예: background-image: url("data:image/png;base64,iVBOR…")
- JSON 및 API: Base64 문자열만 전송하세요. API가 타입을 요구하면 image/png처럼 별도 필드에 넣으세요.
Base64 이미지는 언제 사용해야 하나요?
텍스트 파일 안에 함께 들어가야 하는 작은 이미지에는 Base64를 사용하세요. 사진이나 큰 이미지에는 사용하지 마세요.
- 적합: 별도 파일 요청을 줄이는 게 중요한 수 KB 크기의 아이콘, 로고, 플레이스홀더
- 적합: 다른 파일 없이도 작동해야 하는 단일 파일 HTML 페이지, 보고서, 데모
- 적합: 텍스트만 받는 API와 JSON 페이로드
- 부적합: 사진과 큰 이미지. HTML이나 CSS 용량이 커지고, 브라우저가 페이지와 별도로 캐시할 수 없습니다.
Base64는 이미지를 얼마나 더 크게 만드나요?
Base64는 3바이트마다 4개 문자로 변환하므로 텍스트 크기가 원본 파일보다 약 33% 더 커집니다. 30KB 이미지는 약 40KB의 Base64가 됩니다. 변환 후 도구에서 두 크기를 나란히 보여줍니다. 문자열을 짧게 유지하려면 이미지 압축 도구로 파일을 먼저 줄이세요.
Base64 이미지가 이메일에서 작동하나요?
항상 작동하지는 않습니다. Gmail은 본문에서 Base64 이미지를 제거하는 것으로 널리 알려져 있으며, 다른 이메일 앱마다 지원 여부가 다릅니다. 이메일에는 호스팅된 이미지에 링크를 걸거나 인라인(CID) 이미지로 첨부하세요.
이미지 Base64 변환 FAQ
이미지를 Base64와 데이터 URI로 변환하는 것에 대한 자주 묻는 질문
Base64를 다시 이미지로 변환할 수 있나요?
네. 문자열을 Base64를 이미지로 변환하는 도구에 붙여넣으면 미리 보고 파일로 다운로드할 수 있습니다. 전체 데이터 URI나 원시 Base64 문자열 모두 입력할 수 있습니다.
데이터 URI와 Base64 문자열의 차이는 무엇인가요?
데이터 URI(데이터 URL이라고도 함)는 data:image/png;base64,처럼 파일 유형을 나타내는 접두사가 붙은 Base64 문자열입니다. 원시 Base64 문자열에는 접두사가 없습니다. HTML과 CSS에는 데이터 URI를 사용하고, 유형을 별도 필드로 받는 API에는 원시 문자열을 사용하세요. 도구는 이를 각각 전용 복사 버튼이 있는 전체 데이터 URL과 Base64 문자열만으로 보여줍니다.
Base64 이미지에 크기 제한이 있나요?
변환기 자체에는 크기 제한이 없습니다. 하지만 큰 이미지는 매우 긴 문자열을 만들어 코드 편집기와 이를 불러오는 페이지를 느리게 합니다. 인라인 이미지는 수 KB 이내로 유지하고 큰 파일은 링크로 연결하세요.
SVG를 Base64로 변환할 수 있나요?
네. SVG 파일을 올리면 data:image/svg+xml;base64로 시작하는 데이터 URI를 얻습니다. img 태그와 CSS url()에서 작동합니다. CSS에서는 SVG가 이미 텍스트이기 때문에 URL 인코딩된 SVG가 Base64보다 짧은 경우가 많습니다.
Base64 문자열을 복사하거나 다운로드할 수 있나요?
복사는 가능합니다. 전체 데이터 URL과 Base64 문자열만 각각 복사 버튼이 있습니다. 다운로드 버튼은 없으므로 결과를 저장하려면 텍스트 파일에 붙여넣으세요. 전체 문자열 보기를 클릭하면 페이지에서 전체 데이터 URL을 확인할 수 있습니다.
어떤 이미지 형식을 Base64로 변환할 수 있나요?
브라우저가 이미지로 인식하는 모든 파일을 지원하며, JPG, PNG, WebP, GIF, SVG, AVIF, BMP, ICO가 포함됩니다. 인코더는 파일을 있는 그대로 유지합니다. 크기 조정, 재압축, 형식 변경을 하지 않습니다. 파일을 올렸는데 아무 반응이 없다면 브라우저가 이미지로 인식하지 못한 것입니다.