본문으로 건너뛰기
AZ Tools

이미지 → Base64

이 변환기는 이미지 파일을 Base64 데이터 URL — data:image/…;base64,로 시작하며 파일 전체를 담은 하나의 자기완결적 문자열 — 로 만들어 줍니다. 브라우저의 FileReader API(readAsDataURL)를 사용하므로 인코딩은 기기 안에서 이루어지고 이미지는 절대 업로드되지 않습니다. 이미지를 드롭하거나 선택한 뒤, 미리보기로 올바른 파일이 읽혔는지 확인하고 전체 문자열을 클릭 한 번으로 복사하세요. 데이터 URL은 별도 파일이 번거로운 곳에서 빛을 발합니다. HTTP 요청을 아끼려 HTML·CSS에 인라인하는 작은 아이콘과 로고, JSON 페이로드나 이메일 서명에 심는 이미지, 파일 하나로 완결되는 문서, 빠른 프로토타입 등이 대표적입니다. 다만 트레이드오프도 분명합니다. Base64는 3바이트를 4문자로 인코딩해 크기가 약 33% 커지고, 문자열은 페이지와 별도로 캐시되지 않으며, 마크업을 비대하게 만듭니다 — 수십 KB 이하의 에셋에만 쓰고 큰 사진은 일반 파일로 제공하세요.

여기에 이미지를 끌어다 놓으세요

또는 클릭해서 선택

사용법

  1. 이미지를 드롭 영역에 끌어다 놓거나, 클릭(또는 Enter 키)해서 선택하세요 — 브라우저가 인식하는 모든 이미지 형식이 허용됩니다.
  2. 미리보기로 올바른 이미지가 읽혔는지 확인하세요. 옆에 전체 데이터 URL이 표시됩니다.
  3. 복사 버튼을 눌러 문자열 전체를 한 번에 복사하세요.
  4. img src, CSS의 background-image: url(…), JSON 필드 등 URL이 들어가는 곳 어디든 붙여넣으세요. 다른 이미지로 다시 시작하려면 지우기를 누르세요.

자주 묻는 질문

이미지가 업로드되나요?
아니요. 파일은 브라우저의 FileReader API로 로컬에서 읽히고 결과는 페이지 안에만 머뭅니다. 서버로 전송되는 것도, 떠난 뒤에 저장되는 것도 없습니다.
변환하면 이미지가 바뀌거나 압축되나요?
아니요. Base64는 원본 바이트를 그대로 다시 표기하는 무손실 인코딩이라, 문자열을 디코딩하면 원본과 동일한 파일이 나옵니다. 크기를 줄여 주지는 않으므로, 더 작은 결과가 필요하면 먼저 이미지를 리사이즈·압축한 뒤 변환하세요.
큰 이미지를 인라인해도 되나요?
대개는 권장하지 않습니다. Base64는 크기를 약 33% 불리고, 데이터가 문서와 별도로 캐시되지 않으며, 거대한 문자열은 HTML·CSS 편집을 고통스럽게 만듭니다. 아이콘처럼 작고 자주 재사용되는 에셋만 인라인하고 사진은 일반 파일로 제공하세요.
어떤 형식이 되나요?
브라우저가 이미지로 읽을 수 있는 것이면 무엇이든 — PNG, JPEG, GIF, WebP, SVG, AVIF, ICO 등. 원본 MIME 타입이 data:image/…;base64, 접두사에 보존되므로 붙여넣은 URL은 원본 파일과 똑같이 렌더링됩니다.
CSS나 마크다운에서도 쓸 수 있나요?
네. CSS에서는 background-image: url(…)에 붙여넣고, 마크다운에서는 이미지 대상으로 사용하세요: ![alt](data:image/png;base64,…). 다만 일부 에디터·린터는 매우 긴 줄을 제한하므로 아주 큰 데이터 URL은 다루기 불편할 수 있습니다.

이 주제의 가이드

관련 도구