무료 이미지 Base64 변환기

이 도구는 무엇인가요?

Base64는 이미지의 원본 바이트 같은 이진 데이터를 문자, 숫자, 몇 가지 기호만으로 이루어진 일반 텍스트로 표현하는 방식입니다. 텍스트이기 때문에 Base64로 인코딩된 이미지는 별도 파일로 참조하지 않고 HTML, CSS, JSON 안에 직접 삽입할 수 있습니다.

"data URL"은 이 Base64 텍스트 앞에 어떤 종류의 파일인지 알려주는 짧은 접두사(data:image/png;base64,)를 붙인 형태입니다. 그래서 별도 요청 없이 src나 url() 속성에 바로 넣어 렌더링할 수 있습니다.

왜 사용해야 할까요?

• 두 형식을 한 번에 얻습니다 — HTML/CSS용 전체 data URL과 JSON·설정 파일 삽입용 순수 Base64(접두사 없음).
• 서버 왕복이 없습니다: 작은 아이콘, 아바타, 인라인 이미지에 대한 HTTP 요청 하나를 없앨 수 있습니다.
• 원본 파일의 바이트를 그대로 보존합니다 — 이미지를 디코딩 후 다시 저장하는 다른 도구들과 달리 재인코딩이나 화질 손실이 없습니다.
• 용량 차이를 보여줘서 편의성과 맞바꾸는 대가를 바로 확인할 수 있습니다.
• 비공개: 파일은 브라우저의 FileReader API로 로컬에서 읽히며 기기 밖으로 나가지 않습니다.

사용 방법

1. 업로드 영역을 클릭하거나 이미지 파일을 드래그해서 놓으세요.
2. <img src>나 CSS background-image에 붙여넣을 거라면 전체 data URL을 복사하세요.
3. JSON, YAML 등 이미 파일 형식을 알고 있는 설정 포맷에 값을 넣을 거라면 프리픽스 없는 순수 Base64를 복사하세요.
4. 용량 안내를 확인하세요 — Base64 텍스트는 원본 바이너리 파일보다 약 3분의 1 더 큽니다.

예시

입력

12 KB짜리 PNG 아이콘 파일

결과

data:image/png;base64,iVBORw0KGgoAAAANSU... (약 16 KB 텍스트)와 data: 접두사 없는 동일한 문자열

약 33%의 용량 증가는 Base64 인코딩 자체의 특성입니다(바이너리 3바이트가 텍스트 4글자가 됨) — 도구의 결함이 아닙니다.

각 형식이 쓰이는 곳

Base64와 이미지 용량 — 실전에서의 트레이드오프

약 33%의 오버헤드 때문에 Base64 삽입은 작은 자산에 쓰는 것이 가장 좋습니다. 2 KB 아이콘은 약 2.7 KB의 무해한 인라인 텍스트가 되지만, 500 KB 사진은 HTML 안에 약 665 KB의 텍스트가 그대로 박혀 파싱 속도를 늦추고 페이지와 별도로 캐싱할 수도 없게 됩니다.

여러 이미지를 삽입하거나 큰 이미지를 다룬다면 요청 하나를 줄이는 이득과 페이지 용량 증가의 비용을 저울질하고, 먼저 압축하는 것도 고려하세요.

→ Base64 인코더/디코더 · 이미지 압축기

자주 묻는 질문