이미지 Base64 변환기

자주 묻는 질문

Base64가 뭔가요?

Base64는 이미지나 파일 같은 바이너리 데이터를 텍스트 문자열로 변환하는 인코딩 방식입니다. HTML이나 CSS 코드 안에 이미지를 직접 포함할 때 사용하며, 별도 이미지 파일 없이도 이미지를 표시할 수 있습니다.

Base64 변환 이미지를 HTML에 어떻게 삽입하나요?

변환된 Base64 문자열을 img 태그의 src 속성에 그대로 붙여넣으면 됩니다. 예를 들어 data:image/png;base64,변환된문자열 형식으로 사용합니다. CSS의 background-image 속성에도 동일하게 사용할 수 있습니다.

Base64로 변환하면 파일 크기가 왜 커지나요?

Base64 인코딩은 3바이트의 이진 데이터를 4개의 아스키 문자로 변환합니다. 이 때문에 원본보다 약 33% 파일 크기가 늘어납니다. 외부 요청을 줄이는 대신 파일 크기가 커지는 트레이드오프가 있습니다.

어떤 이미지 형식을 Base64로 변환할 수 있나요?

JPG, PNG, WebP, GIF, SVG 등 대부분의 이미지 형식을 Base64로 변환할 수 있습니다. 변환 결과는 data URI 형식으로 제공되어 HTML, CSS, JavaScript에서 바로 사용할 수 있습니다.

Base64 문자열을 다시 이미지 파일로 복원할 수 있나요?

네, Base64 문자열을 붙여넣으면 원본 이미지로 복원하여 다운로드할 수 있습니다. data:image/... 형식의 data URI도 지원합니다.

주요 기능

양방향 변환: 이미지 → Base64 인코딩과 Base64 → 이미지 디코딩을 한 화면에서
다양한 포맷 지원: JPG, PNG, WebP, GIF, BMP, SVG 모두 지원
data URI 즉시 생성: HTML img src, CSS background-image에 바로 사용 가능한 data URI 출력

사용 방법

이미지 업로드: 왼쪽 패널에 이미지를 드래그하거나 파일 선택 버튼으로 업로드하세요
결과 복사: data URI 전체 또는 Base64 부분만 선택해서 복사하세요
Base64 → 이미지 복원: 오른쪽 패널에 Base64 문자열을 붙여넣으면 이미지로 복원됩니다

활용 사례

HTML 임베드: img src에 data URI를 사용해 서버 요청 없이 이미지 표시
CSS 배경: background-image: url(data:...)로 CSS에 이미지 임베드
API 전달: REST API나 JSON 페이로드에 이미지 데이터를 Base64로 포함
디버깅: Base64로 인코딩된 이미지 데이터를 빠르게 시각화

코드 예시

변환된 data URI를 HTML과 CSS에 바로 붙여넣어 사용할 수 있습니다.

HTML

<!-- img src에 data URI 직접 삽입 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="이미지">

<!-- picture 태그와 함께 사용 -->
<picture>
  <source srcset="data:image/webp;base64,UklGRiAA...==" type="image/webp">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="이미지">
</picture>

CSS

/* background-image에 data URI 사용 */
.thumbnail {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==");
  background-size: cover;
  background-position: center;
}

/* content 속성에 사용 */
.icon::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...==");
}