Saltar al contenido principal

이미지 → Base64 변환기

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

📁

Click or drag and drop an image here

Supports: JPG, PNG, GIF, WebP (Max 10MB)

About Base64 Images

Base64 encoding converts images into text format that can be embedded directly in HTML, CSS, or JSON. This eliminates the need for separate image files and reduces HTTP requests.

Advantages

  • No additional HTTP requests - faster page load
  • Perfect for small icons and logos
  • Works well in email templates
  • Self-contained HTML files

Disadvantages

  • Increases file size by ~33%
  • Cannot be cached separately by browsers
  • Not suitable for large images
  • Makes code less readable

Best Practices

  • Use for small images (icons, bullets) under 10KB
  • Optimize images before converting
  • Consider SVG for vector graphics instead
  • Use traditional image files for photos

주요 기능​

📤 간편한 업로드​

  • 클릭하여 파일 선택
  • 드래그 앤 드롭 지원
  • 최대 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:;

관련 도구​