이미지 to Base64 변환기

이미지를 Base64 인코딩 문자열로 변환

여기에 이미지를 놓거나 클릭하여 선택

최종 수정:

도구 소개

이미지 Base64 인코더는 PNG, JPEG, GIF, SVG, WebP 파일을 HTML/CSS/Markdown에 바로 붙여 넣을 수 있는 data: URL로 변환합니다. 작은 이미지를 인라인하면 별도의 HTTP 요청이 사라지므로 이메일 템플릿의 아이콘, 단일 파일 HTML, 캐싱이 중요하지 않은 CSS 스프라이트 내부 자원 등에 유용합니다.

사용 방법

  1. 드롭 영역에 이미지를 드래그하거나 클릭해 파일을 선택합니다.
  2. 파일이 브라우저 안에서 읽히는 동안 잠시 대기합니다 — 서버 업로드가 일어나지 않습니다.
  3. 미리보기로 이미지를 확인하고 data: URL 또는 순수 Base64 문자열을 검사합니다.
  4. 필요한 형식을 복사합니다 (HTML/CSS에는 전체 data URL, JSON에는 순수 Base64).
  5. <img src="…">, CSS background-image: url(…), JSON 필드 등에 붙여넣어 사용합니다.

주요 사용 사례

  • 외부 이미지 로딩을 막는 HTML 이메일 템플릿에 작은 아이콘 인라인
  • 에셋 번들 없이 단일 파일 HTML 리포트에 로고 삽입
  • 바이너리 업로드 파이프라인이 과한 경우 사용자 아바타를 JSON에 저장
  • 랜딩 페이지의 크리티컬 패스 작은 이미지를 위해 HTTP 요청 수 감소
  • 자체 포함되어야 하는 Markdown 문서에 이미지 삽입
  • <link rel="icon" href="data:…"> 형태로 SVG 파비콘을 직접 포함

자주 묻는 질문

Q. 이미지 크기가 얼마면 인라인을 피해야 할까요?

A. 아이콘은 약 5KB 이하일 때 권장합니다. 그보다 크면 캐시 이점이 사라져 페이지마다 다시 다운로드됩니다.

Q. Base64는 이미지 용량을 늘리나요?

A. 약 33% 증가합니다. 다만 SVG는 Base64 없이 data:image/svg+xml;utf8,… 형태로 그대로 인라인할 수 있습니다.

Q. 오래된 브라우저에서도 data: URL이 렌더링되나요?

A. 모든 최신 브라우저는 지원합니다. 일부 레거시 이메일 클라이언트(구 Outlook)는 <img> 안의 data URL을 제거하므로 실제 클라이언트로 검증이 필요합니다.

Q. 이미지가 서버로 업로드되나요?

A. 아닙니다. 인코딩은 브라우저의 FileReader로만 수행되며 이미지 바이트가 디바이스를 벗어나지 않습니다.