이미지 Base64 변환기 - 온라인 인코딩 & 디코딩

이미지를 Base64 문자열로 변환하거나 Base64를 이미지로 디코딩합니다. PNG, JPG, SVG, GIF, WebP를 지원합니다. 100% 클라이언트 사이드 처리.

입력

이미지를 드래그하거나 클릭하여 선택하세요

PNG, JPG, SVG, GIF, WebP 지원 (최대 10MB)

출력

이미지는 브라우저에서 완전히 처리됩니다. 어떤 파일도 서버로 업로드되지 않습니다.

자주 묻는 질문

이미지 Base64 인코딩이란 무엇이며 왜 사용하나요?

이미지 Base64 인코딩은 바이너리 이미지 데이터를 Base64 알파벳(A-Z, a-z, 0-9, +, /)을 사용한 텍스트 문자열로 변환합니다. 결과 문자열은 Data URI(data:image/png;base64,...)로 HTML, CSS, JavaScript에 직접 삽입할 수 있습니다. 이는 각 이미지에 대한 별도의 HTTP 요청을 제거하여, 아이콘, 로고, UI 요소 같은 작은 이미지에 특히 유용합니다. 외부 이미지 로딩이 차단되는 이메일 템플릿에서도 필수적입니다.

이 이미지 Base64 도구는 어떻게 사용하나요?

인코딩: '인코딩' 모드를 선택한 후, 업로드 영역에 이미지를 드래그 앤 드롭하거나 클릭하여 선택합니다. 도구가 즉시 Base64 문자열을 생성합니다. 원하는 출력 형식(Raw Base64, Data URI, HTML <img>, CSS Background)을 선택하고 복사 버튼을 클릭합니다. 디코딩: '디코딩' 모드를 선택하고, 입력 영역에 Base64 문자열이나 Data URI를 붙여넣습니다. 도구가 자동으로 디코딩하여 이미지 미리보기를 표시합니다. 디코딩된 이미지를 다운로드할 수도 있습니다.

이미지 데이터는 안전한가요? 서버에 업로드되나요?

이미지는 100% 안전하며 브라우저를 떠나지 않습니다. 모든 인코딩과 디코딩은 브라우저의 네이티브 FileReader API와 atob()/btoa() 함수를 사용하여 클라이언트 측에서 수행됩니다. 이미지 데이터, Base64 문자열 또는 어떤 정보도 서버로 전송되지 않습니다. 브라우저의 네트워크 탭에서 업로드 요청이 없는 것을 확인할 수 있습니다.

어떤 이미지 형식을 지원하나요?

이 도구는 가장 일반적인 5가지 웹 이미지 형식을 지원합니다: PNG, JPEG(JPG), SVG, GIF, WebP. 각 형식은 MIME 타입으로 자동 감지되며 적절한 Data URI 접두사로 정확하게 인코딩됩니다. XML 기반인 SVG 파일은 특히 잘 인코딩되며 Base64 형태에서도 벡터 품질을 유지합니다. 애니메이션 GIF는 Base64 인코딩 시에도 애니메이션이 보존됩니다.

Base64 인코딩의 크기 오버헤드는 얼마인가요?

Base64 인코딩은 데이터 크기를 약 33% 증가시킵니다. Base64는 3바이트의 바이너리 데이터를 4개의 ASCII 문자로 변환하기 때문입니다. 예를 들어, 30KB 아이콘은 약 40KB의 Base64 문자열이 됩니다. 이는 HTTP 요청 제거가 크기 증가보다 이점이 큰 작은 이미지(10-20KB 미만)에 Base64 삽입을 이상적으로 만듭니다. 큰 이미지(100KB 이상)의 경우 브라우저 캐싱과 병렬 로딩을 활용하기 위해 별도 파일로 제공하는 것이 일반적으로 더 좋습니다.

Raw Base64와 Data URI의 차이점은 무엇인가요?

Raw Base64는 순수 인코딩 문자열입니다(예: iVBORw0KGgoAAAA...). Data URI는 이를 MIME 타입 접두사로 감쌉니다: data:image/png;base64,iVBORw0KGgoAAAA... HTML <img src>, CSS background-image: url(...) 또는 브라우저 <link> 태그에 이미지를 삽입할 때는 Data URI 형식이 필요합니다. API 페이로드, 데이터베이스 저장 또는 커스텀 처리를 위해 인코딩된 데이터만 필요할 때는 Raw Base64가 유용합니다.

Base64 이미지와 일반 이미지 파일 중 언제 무엇을 사용해야 하나요?

Base64 삽입 사용: 작은 아이콘과 로고(10-20KB 미만), 단일 파일 HTML 페이지, 이메일 템플릿, CSS 스프라이트 대체, 인라인 SVG 대안. 일반 이미지 파일 사용: 큰 사진, 브라우저 캐싱이 유리한 이미지, 여러 페이지에서 공유되는 이미지, 33% 크기 오버헤드가 중요한 50KB 이상 이미지. 일반 규칙: HTTP 요청 오버헤드가 Base64 크기 오버헤드보다 크면 Base64를 사용하세요.

Data URI 접두사 없이 Base64 문자열을 디코딩할 수 있나요?

네. data:image/...;base64, 접두사 없이 순수 Base64 문자열을 붙여넣으면, 도구는 기본 형식(PNG)을 가정하여 디코딩을 시도합니다. 최상의 결과를 위해서는 전체 Data URI 접두사를 포함하여 도구가 이미지 타입을 정확히 감지하고 다운로드 시 적절한 파일 확장자를 설정할 수 있도록 하세요.

코드 예제

// === Image to Base64 Encoding (Browser) ===

// Encode image file to Base64 Data URI
function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Extract raw Base64 from Data URI
function extractRawBase64(dataUri) {
  const commaIndex = dataUri.indexOf(',');
  return commaIndex !== -1 ? dataUri.substring(commaIndex + 1) : dataUri;
}

// Format output for different use cases
function formatBase64Output(dataUri, format) {
  switch (format) {
    case 'raw': return extractRawBase64(dataUri);
    case 'html': return `<img src="${dataUri}" alt="" />`;
    case 'css': return `background-image: url(${dataUri});`;
    default: return dataUri;
  }
}

// === Base64 to Image Decoding ===

function base64ToBlob(base64Input) {
  let dataUri = base64Input.trim();
  if (!dataUri.startsWith('data:')) {
    dataUri = `data:image/png;base64,${dataUri}`;
  }
  const [header, data] = dataUri.split(',');
  const mimeMatch = header.match(/data:(.*?);/);
  const mimeType = mimeMatch ? mimeMatch[1] : 'image/png';
  const byteString = atob(data);
  const byteArray = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    byteArray[i] = byteString.charCodeAt(i);
  }
  return new Blob([byteArray], { type: mimeType });
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const dataUri = await imageToBase64(file);
  console.log('HTML:', formatBase64Output(dataUri, 'html'));
});