이미지를 Base64로

이미지를 Base64 데이터 URI로 바꾸거나, 텍스트를 Base64로 인코딩·디코딩하고 Base64를 다시 파일로 되돌려요

✓ 영구 무료 · ✓ 가입 불필요 · ✓ 업로드 없음 · ✓ 오프라인 작동

🔒 데이터가 기기 밖으로 나가지 않아요. 모든 처리는 FileReader API를 사용하여 브라우저에서 로컬로 이루어져요. 업로드, 서버, 추적이 없어요.

기능

Data URI 출력 — HTML, CSS, JavaScript에 직접 붙여넣을 수 있는 완전한 data:image/... URI 문자열을 제공해요.
원클릭 복사 — 원본 Data URI, <img> 태그, CSS background-image 속성으로 복사하세요.
크기 비교 — 원본 파일 크기 대비 Base64 문자열 길이를 확인하세요(Base64는 약 33% 더 커요).
텍스트와 디코딩도 — 어떤 텍스트든 UTF-8 Base64(표준 또는 URL 안전)로 인코딩하고, Base64를 텍스트로 디코딩하거나, Base64 문자열을 미리보기·다운로드할 수 있는 파일로 되돌려요.

작동 방식

이미지 업로드 — 이미지를 올리면 Base64로 변환돼요.
복사 형식 선택 — Data URI, <img> 태그, CSS background-image로 복사하세요.
코드에 붙여넣기 — Base64 문자열이 이미지를 코드에 직접 삽입해요 — 별도 파일이 필요 없어요.

활용 사례

HTTP 요청을 줄이기 위해 작은 이미지를 HTML에 직접 삽입
이미지를 품은 단독 HTML 파일(보고서, 오프라인 페이지) — 단, Gmail과 Outlook은 이메일 속 data URI 이미지를 차단해요
스타일시트에 삽입된 CSS 배경 이미지
단일 파일 배포를 위해 JavaScript 코드에 아이콘 번들링

자주 묻는 질문

Base64는 언제 사용해야 하나요?

작은 이미지(10KB 미만) — 아이콘, 로고, 작은 UI 요소. 삽입하면 추가 HTTP 요청을 피할 수 있어요. 큰 이미지는 별도 파일로 제공하는 것이 좋아요.

왜 Base64 문자열이 파일보다 더 큰가요?

Base64 인코딩은 바이너리 데이터를 ASCII 텍스트로 변환하기 때문에 크기가 약 33% 증가해요. 이는 이미지를 코드에 직접 삽입할 수 있는 대가예요.

전체 이미지 품질이 유지되나요?

네. Base64는 똑같은 바이트를 다르게 표현한 것일 뿐이라 품질 손실이 없어요. 예외 하나: iPhone HEIC 사진은 브라우저가 data URI의 HEIC를 표시하지 못해서 먼저 JPEG로 변환해요. 그럴 땐 페이지에서 알려드려요.

Base64 디코딩도 되나요?

네 — “텍스트 ⇄ Base64”로 바꾸고 “디코딩”을 고르세요. Base64나 data: URI 전체를 붙여넣으면 공백, 줄바꿈, URL 안전 Base64도 읽어요. 텍스트면 텍스트를, 파일(PNG, JPG, PDF, ZIP…)이면 가능한 경우 미리보기와 다운로드를 보여줘요. 잘못된 문자는 그 문자와 위치를 알려줘요.

URL 안전 Base64가 뭔가요?

+ 와 / 대신 - 와 _ 를 쓰고 보통 = 패딩도 없는 같은 인코딩이에요. URL이나 JWT에 이스케이프 없이 넣을 수 있어요. 인코딩할 때 “URL 안전”을 켜세요. 디코딩은 두 형식을 자동으로 읽어요.

블로그 가이드

📖 How to Encode and Decode Base64 (and Turn an Image Into a Data URI) — Encode and decode Base64 text, and convert a small image into a data URI you can inline in CSS or HTML — all locally in your browser, nothing uploaded.