🖼️

이미지 Base64 변환

이미지를 끌어다 놓으면 Base64 문자열 또는 data URI로 변환됩니다. 출력 형식을 선택하고 HTML, CSS, JSON에 바로 복사하세요. 파일은 업로드되지 않으며 — 모든 작업은 브라우저에서 실행됩니다.

이미지 도구 로컬에서 실행 데이터 전송 없음
Base64data URI임베드이미지
이미지 파일
📤
이미지를 여기에 놓거나 클릭하여 찾아보세요
JPEG, PNG, WebP, GIF, SVG, BMP, ICO — 로컬에서 처리됨
미리보기

이미지 Base64 변환이란?

이미지 Base64 변환은 브라우저 내장 FileReader API를 사용해 이미지 파일을 Base64로 인코딩된 문자열로 변환합니다. 출력은 순수 Base64 문자열, 전체 data URI, CSS background-image 선언 또는 HTML img 태그 중 대상 사용 사례에 필요한 형식으로 지정할 수 있습니다.

이미지 Base64 변환 사용 방법

  1. 이미지 파일을 드롭 영역에 놓거나 클릭하여 찾아보세요.
  2. 출력 형식을 선택하세요: Data URI, 순수 Base64, CSS background-image 또는 HTML img 태그.
  3. 한 번의 클릭으로 결과를 클립보드에 복사하세요.
  4. HTML, CSS, JSON 또는 원하는 위치에 바로 붙여넣으세요.
Base64 이미지 인코딩 이해하기 ▾
예시
입력 logo.png (2 KB)
출력 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
일반적인 사용 사례
  • HTML 이메일에 작은 로고 포함하기
  • CSS 파일에 스피너나 아이콘을 인라인으로 넣기
  • 이미지 데이터를 JSON 문자열로 API에 전달하기
  • 이미지를 내장한 자체 포함형 HTML 파일 만들기
이 도구를 사용하는 이유
  • 네 가지 출력 형식 — data URI, 원시 Base64, CSS, HTML.
  • 원본 크기와 인코딩된 크기, 증가율(%)을 표시합니다.
  • 이미지가 페이지 성능에 영향을 줄 만큼 크면 경고합니다.
  • 파일 업로드 없음 — 모든 작업이 브라우저에서 실행됩니다.
자주 묻는 질문
Base64 이미지란 무엇인가요?

Base64는 바이너리 데이터(예: 이미지)를 일반 텍스트 ASCII 문자열로 인코딩하는 방법입니다. data URI는 MIME 타입이 앞에 붙은 Base64 문자열로, data:image/png;base64,... 형식이며 — 별도의 파일 요청 없이 이미지를 삽입하기 위해 img 태그의 src 속성이나 CSS background-image에 직접 배치할 수 있습니다.

data URI는 언제 사용해야 하나요?

data URI는 외부 파일 참조가 차단될 수 있는 HTML 이메일에서 작은 아이콘, 로고 또는 인라인 이미지에 적합합니다. 큰 이미지의 경우 페이지 용량을 늘리고 성능을 저하시킬 수 있으므로 최소한으로 사용하세요.

내 이미지가 서버에 업로드되나요?

아니요. FileReader API가 브라우저에서 이미지를 직접 인코딩합니다. 이미지는 기기 밖으로 전송되지 않습니다.

Base64 이미지는 얼마나 커지나요?

Base64 인코딩은 이진 데이터 3바이트가 4개의 ASCII 문자로 변환되므로 데이터 크기가 약 33% 증가합니다. 100 KB 이미지는 Base64 문자열로 약 133 KB가 됩니다.