이미지를 Base64 데이터 URL로 변환하는 방법

Base64 이미지 데이터 URL이란?

Base64 이미지 데이터 URL은 전체 이미지 파일을 텍스트 문자열로 웹 문서에 직접 임베딩하여, 이미지를 로드하기 위한 별도의 HTTP 요청이 필요 없게 만듭니다. 브라우저가 외부 파일을 가져오는 대신, 이미지 데이터가 HTML 또는 CSS에 이미 포함되어 있습니다.

형식은 다음과 같습니다:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

구분해 보면:

• data: — 데이터 URI 스킴 접두사
• image/png — 임베딩된 이미지의 MIME 유형
• ;base64 — Base64 인코딩임을 나타냅니다
• ,iVBORw0... — 실제 Base64로 인코딩된 이미지 데이터

왜 이미지를 Base64로 변환해야 할까요?

이미지를 Base64로 임베딩하는 것은 여러 시나리오에서 유용합니다:

HTTP 요청 감소

각 외부 이미지 파일은 별도의 HTTP 요청이 필요합니다. Base64 데이터 URL은 이러한 요청을 제거하여, 특히 지연이 높은 연결이나 작은 애셋이 많은 페이지의 경우 페이지 로드 시간을 개선할 수 있습니다.

자체 포함된 문서

Base64 이미지는 HTML 파일을 완전히 이식 가능하게 만듭니다. Base64 이미지가 포함된 이메일 템플릿은 수신자의 이메일 클라이언트가 외부 리소스를 차단해도 작동합니다. 마찬가지로, 임베딩된 이미지가 있는 HTML 문서는 깨진 이미지 경로를 걱정하지 않고 단일 파일로 공유할 수 있습니다.

성능이 중요한 페이지

최상단 히어로 이미지와 중요한 UI 요소의 경우, 추가 왕복을 제거하면 LCP(Largest Contentful Paint)와 같은 지표를 개선할 수 있습니다. 그러나 이는 작은 이미지에만 유용하며, 큰 이미지의 경우 인라인화가 오히려 역효과를 냅니다.

오프라인에서 작동

이미지가 데이터 URL로 임베딩되면 네트워크 접근 없이도 작동합니다. 이는 오프라인 웹 애플리케이션과 PWA(Progressive Web App)에 유용합니다.

이미지를 Base64로 변환하는 방법

방법 1: 온라인 도구 사용하기 (가장 쉬움)

이미지를 Base64로 변환하는 가장 빠른 방법은 전용 온라인 도구를 사용하는 것입니다. 무료 온라인 Base64 인코더에 이미지를 업로드하거나 드래그 앤 드롭하면, 코드에 붙여넣을 수 있는 완전한 데이터 URL을 얻을 수 있습니다.

방법 2: 브라우저에서 JavaScript 사용하기

FileReader API는 사용자가 선택한 이미지를 Base64로 변환하는 간단한 방법을 제공합니다:

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);
  });
}

// Usage with a file input
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

방법 3: Canvas API 사용하기

Base64로 변환하기 전에 이미지를 크기 조정, 자르기 또는 압축해야 하는 경우 Canvas API를 사용하세요:

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Example: Resize an image before converting
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

방법 4: Node.js 사용하기

서버 측에서는 fs 모듈과 Buffer를 사용하여 이미지 파일을 Base64로 변환합니다:

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Detect MIME type from extension
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

방법 5: 명령줄 사용하기

Linux와 macOS에서는 내장 base64 명령어를 사용할 수 있습니다:

# Encode to Base64 and wrap as a data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

HTML에서 Base64 이미지 사용하기

<img> 태그에 직접 사용:

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

CSS에서 Base64 이미지 사용하기

배경 이미지로 사용:

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

성능 고려 사항 및 모범 사례

Base64 이미지가 도움이 되는 경우

• 10KB 미만의 작은 아이콘 및 UI 요소
• 렌더링을 차단하는 중요한 최상단 이미지
• 페이지 전체에서 사용되는 스프라이트 및 SVG 아이콘
• 외부 이미지가 자주 차단되는 이메일 템플릿
• 오프라인 우선 웹 앱 및 자체 포함 문서

Base64 이미지가 해가 되는 경우

• 대용량 사진 또는 고해상도 이미지 (100KB 이상) — Base64 오버헤드와 구문 분석 지연이 성능을 저하시킵니다
• 자주 변경되는 이미지 — 대용량 HTML 페이로드에 대한 브라우저 캐시 무효화는 낭비입니다
• 여러 페이지에서 공유되는 이미지 — 외부 파일은 공유 브라우저 캐싱의 이점을 누립니다
• CDN 제공 이미지 — CDN이 인라인 데이터보다 파일 전송을 더 잘 최적화합니다

10KB 경험 법칙

널리 인용되는 지침: 이미지가 10KB 미만이면 Base64로 인라인화하는 것을 고려하세요. 더 크면 별도 파일로 제공하세요. 이는 HTTP 요청의 오버헤드와 HTML의 Base64 인코딩 데이터 오버헤드 간의 균형을 맞춥니다.

그러나 최적의 임계값은 특정 상황에 따라 다릅니다:

• HTTP/2 멀티플렉싱은 여러 요청의 패널티를 줄여 외부 파일을 더 매력적으로 만듭니다
• 느린 연결에서는 더 큰 이미지라도 요청을 제거하는 것이 가치 있을 수 있습니다
• 중요 렌더링 경로 리소스의 경우, 왕복을 한 번 줄일 수 있다면 더 큰 이미지도 인라인화하세요

압축 고려 사항

JPEG 또는 PNG 이미지를 Base64로 변환하는 경우, 대신 WebP 사용을 고려하세요. WebP는 동일한 품질 수준에서 더 우수한 압축을 제공하여 더 작은 Base64 문자열을 생성합니다. 많은 온라인 도구에서 Base64로 변환하기 전에 이미지를 다시 인코딩할 수 있습니다.

이미지를 Base64로 변환하기

코드에 이미지를 직접 임베딩할 준비가 되셨나요? 무료 온라인 Base64 인코더 및 디코더를 사용하여 이미지를 업로드하고 HTML, CSS, JavaScript용 완전한 데이터 URL을 얻으세요 — 설치가 필요하지 않습니다.