이미지 Base64 변환기

주요 기능

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

사용 방법

1. 이미지 업로드: 왼쪽 패널에 이미지를 드래그하거나 파일 선택 버튼으로 업로드하세요
2. 결과 복사: data URI 전체 또는 Base64 부분만 선택해서 복사하세요
3. 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...==");
}