이미지를 Base64로

이미지를 Base64 데이터 URI로 변환 — 코드에 삽입하기 좋아요

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

기능

  • Data URI 출력 — HTML, CSS, JavaScript에 직접 붙여넣을 수 있는 완전한 data:image/... URI 문자열을 제공해요.
  • 원클릭 복사 — 원본 Data URI, <img> 태그, CSS background-image 속성으로 복사하세요.
  • 크기 비교 — 원본 파일 크기 대비 Base64 문자열 길이를 확인하세요(Base64는 약 33% 더 커요).
  • 즉시 변환 — 변환이 즉시 이루어져요 — 처리 시간이 필요 없어요.

작동 방식

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

활용 사례

  • HTTP 요청을 줄이기 위해 작은 이미지를 HTML에 직접 삽입
  • 외부 로딩 없이 표시되는 HTML 이메일 인라인 이미지
  • 스타일시트에 삽입된 CSS 배경 이미지
  • 단일 파일 배포를 위해 JavaScript 코드에 아이콘 번들링

자주 묻는 질문

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

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

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

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

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

네. Base64는 동일한 바이너리 데이터의 다른 인코딩일 뿐이에요 — 품질 손실이 전혀 없어요.

관련 도구