本文へスキップ

이미지 → Base64 변환기

이미지 파일을 Base64 문자열로 변환하세요. HTML, CSS에 직접 임베드할 수 있는 Base64 코드를 생성합니다.

📁

ここをクリックまたは画像をドラッグ＆ドロップ

対応形式: JPG, PNG, GIF, WebP（最大10MB）

Base64画像について

Base64エンコーディングは、画像を HTML、CSS、または JSON に直接埋め込むことができるテキスト形式に変換します。これにより、別の画像ファイルが不要になり、HTTP リクエストが減少します。

利点

  • 追加の HTTP リクエストなし - ページ読み込みが高速
  • 小さなアイコンとロゴに最適
  • メールテンプレートで適切に動作
  • 自己完結型 HTML ファイル

欠点

  • ファイルサイズが約33%増加
  • ブラウザで個別にキャッシュできない
  • 大きな画像には不向き
  • コードの可読性が低下

ベストプラクティス

  • 10KB 未満の小さな画像（アイコン、箇条書き）に使用
  • 変換前に画像を最適化
  • ベクターグラフィックには代わりに SVG を検討
  • 写真には従来の画像ファイルを使用

주요 기능​

📤 간편한 업로드​

  • 클릭하여 파일 선택
  • 드래그 앤 드롭 지원
  • 최대 10MB까지 지원

🖼️ 미리보기​

  • 업로드한 이미지 즉시 미리보기
  • 이미지 정보 표시 (크기, 해상도, 타입)
  • Base64 데이터 크기 계산

💻 코드 스니펫​

  • HTML <img> 태그 예제
  • CSS background-image 예제
  • 원클릭 복사 기능

💾 내보내기​

  • Base64 문자열 복사
  • HTML/CSS 코드 복사

Base64 인코딩이란?​

Base64는 바이너리 데이터를 텍스트 형식으로 변환하는 인코딩 방식입니다. 이미지를 Base64로 인코딩하면 HTML이나 CSS에 직접 포함시킬 수 있습니다.

일반 이미지 vs Base64​

일반적인 방법:

<img src="image.png" alt="이미지" />

Base64 방법:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="이미지" />

장점​

✅ HTTP 요청 감소​

  • 추가 파일 다운로드 불필요
  • 페이지 로딩 시간 단축 (작은 이미지의 경우)

✅ 단일 파일로 완결​

  • HTML 파일 하나로 모든 것 포함
  • 이메일 HTML에 이상적

✅ CDN/호스팅 불필요​

  • 이미지 호스팅 서버 불필요
  • 외부 의존성 제거

✅ 즉시 사용 가능​

  • 즉시 렌더링 가능
  • 캐싱 문제 없음 (작은 파일)

단점​

❌ 파일 크기 증가​

  • Base64는 원본보다 약 33% 크기 증가
  • 큰 이미지에는 부적합

❌ 브라우저 캐싱 불가​

  • 매번 HTML과 함께 전송됨
  • 재사용성 떨어짐

❌ 코드 가독성 저하​

  • HTML/CSS 코드가 길어짐
  • 유지보수 어려움

❌ CSS 스프라이트 불가​

  • 이미지 조합 기법 사용 불가

언제 사용해야 할까?​

✅ 적합한 경우​

  1. 아이콘과 작은 이미지 (1-10KB)

    • UI 아이콘
    • 불릿 포인트
    • 작은 로고

  2. 단일 HTML 파일

    • 이메일 템플릿
    • 오프라인 HTML 문서
    • 프레젠테이션

  3. 즉시 표시가 필요한 경우

    • 위 폴드 컨텐츠
    • 중요한 UI 요소

❌ 부적합한 경우​

  1. 큰 이미지 (>50KB)

    • 사진
    • 배경 이미지
    • 배너

  2. 재사용되는 이미지

    • 여러 페이지에서 사용
    • 자주 업데이트되는 이미지

  3. SEO가 중요한 이미지

    • 제품 이미지
    • 블로그 포스트 이미지

지원 형식​

  • JPG/JPEG: 사진에 적합
  • PNG: 투명 배경 지원
  • GIF: 애니메이션 지원
  • WebP: 현대적인 포맷

사용 예시​

HTML 이미지​

<img
  src="data:image/png;base64,iVBORw0KGg..."
  alt="설명"
  width="100"
  height="100"
/>

CSS 배경​

.element {
  background-image: url('data:image/png;base64,iVBORw0KGg...');
  background-size: cover;
  background-position: center;
}

반응형 이미지​

<picture>
  <source
    media="(min-width: 768px)"
    srcset="data:image/png;base64,..."
  />
  <img src="data:image/png;base64,..." alt="설명" />
</picture>

최적화 팁​

1. 이미지 압축​

Base64 변환 전에 이미지를 압축하세요:

  • TinyPNG
  • ImageOptim
  • Squoosh

2. 적절한 포맷 선택​

  • 사진: JPG (손실 압축)
  • 아이콘: PNG (무손실, 투명도)
  • 단순 그래픽: SVG (벡터)

3. 크기 조정​

필요한 크기로만 사용:

  • 2x 레티나: 원본 크기의 2배
  • 1x: 실제 표시 크기

4. Lazy Loading 고려​

Base64를 직접 사용하는 대신:

// 필요할 때만 로드
const base64 = 'data:image/png;base64,...';
img.src = base64;

보안 고려사항​

⚠️ XSS 공격 주의​

사용자로부터 이미지를 받을 때:

  • 파일 타입 검증
  • 파일 크기 제한
  • Content-Type 확인

⚠️ CSP (Content Security Policy)​

Base64 이미지는 CSP img-src 정책에서:

Content-Security-Policy: img-src 'self' data:;

관련 도구​