Data URI란?

Data URI는 파일을 외부 리소스로 로드하지 않고 문서 내에 직접 포함하는 방식입니다.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="1px 빨간 점">

장점

1. HTTP 요청 감소

작은 이미지 여러 개를 하나의 HTML/CSS 파일에 포함시켜 HTTP 요청 수를 줄일 수 있습니다.

/* CSS에서 Data URI 사용 */
.icon-home {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0...');
}

2. 캐싱 단순화

이미지가 CSS나 HTML과 함께 캐싱되므로 별도의 캐시 관리가 필요 없습니다.

3. 외부 의존성 제거

이미지 서버가 다운되어도 사이트가 정상적으로 작동합니다.

단점

1. 파일 크기 증가 (약 33%)

Base64 인코딩은 원본보다 약 33% 더 큽니다.

원본 이미지: 3KB
Base64 인코딩: 4KB (+33%)

2. 캐싱 비효율

이미지가 변경되면 전체 CSS/HTML 파일을 다시 다운로드해야 합니다.

<!-- 로고 하나만 변경되어도 전체 HTML 재다운로드 -->
<img src="data:image/png;base64,..." alt="로고">

3. 렌더링 지연

브라우저는 전체 Data URI가 로드될 때까지 이미지를 표시하지 않습니다.

언제 사용해야 할까?

✅ 사용 권장

1. 매우 작은 아이콘 (< 5KB)

<!-- 체크마크 아이콘 -->
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD..." alt="완료">

2. 자주 변경되지 않는 로고

.logo {
  background: url('data:image/png;base64,...') no-repeat;
}

3. 크리티컬 CSS의 이미지

첫 화면에 필수적인 작은 이미지는 인라인으로 포함하면 렌더링이 빨라집니다.

4. 이메일 템플릿

이메일 클라이언트에서 외부 이미지가 차단될 수 있으므로 Data URI가 유용합니다.

❌ 사용 비권장

1. 큰 이미지 (> 10KB)

<!-- 나쁜 예: 큰 사진을 Data URI로 -->
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRg..." alt="풍경사진">
<!-- 파일 크기가 너무 커져서 성능 저하 -->

2. 여러 페이지에서 공유되는 이미지

/* 나쁜 예: 모든 페이지의 CSS에 포함 */
.common-logo {
  background: url('data:image/png;base64,...');
}
/* → 각 페이지마다 중복 다운로드 */

3. 자주 변경되는 이미지

<!-- 나쁜 예: 자주 업데이트되는 배너 -->
<img src="data:image/jpeg;base64,..." alt="이벤트 배너">
<!-- → 배너만 바뀌어도 HTML 전체 재배포 필요 -->

4. 반응형 이미지

<!-- 나쁜 예: srcset이 필요한 경우 -->
<img src="data:image/jpeg;base64,..."
     srcset="data:image/jpeg;base64,... 2x">
<!-- → Data URI가 너무 길어짐 -->

성능 비교

시나리오 1: 작은 아이콘 10개 (각 2KB)

방식	총 크기	HTTP 요청	첫 로드 시간
외부 이미지	20KB	11개	1.2초
Data URI	27KB	1개	0.8초

결론: Data URI가 더 빠름 ✅

시나리오 2: 큰 사진 1개 (50KB)

방식	총 크기	HTTP 요청	첫 로드 시간
외부 이미지	50KB	2개	0.9초
Data URI	67KB	1개	1.3초

결론: 외부 이미지가 더 빠름 ❌

실전 팁

1. 자동화 도구 사용

빌드 타임에 작은 이미지를 자동으로 Data URI로 변환:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 5 * 1024 // 5KB 미만만 Data URI로
          }
        }
      }
    ]
  }
};

2. SVG는 직접 인라인

작은 SVG 아이콘은 Base64 대신 직접 HTML에 포함:

<!-- Base64 대신 이렇게 -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>

이점:

압축 효율이 더 좋음
CSS로 색상 변경 가능
더 읽기 쉬움

3. 조건부 로딩

// 작은 이미지만 Data URI로 변환
function shouldUseDataURI(fileSize) {
  return fileSize < 5 * 1024; // 5KB
}

4. 크리티컬 CSS만 인라인

<head>
  <!-- 크리티컬 CSS: 작은 아이콘만 Data URI -->
  <style>
    .icon { background: url('data:image/svg+xml;base64,...'); }
  </style>

  <!-- 나머지는 외부 파일 -->
  <link rel="stylesheet" href="styles.css">
</head>

도구 추천

온라인 변환

Base64.kr - 이미지를 Base64로 변환
파일 크기 확인 기능 제공
Data URI 형식 자동 생성

빌드 도구

// Vite 설정 예시
export default {
  build: {
    assetsInlineLimit: 4096 // 4KB 미만만 인라인
  }
}

마치며

Data URI는 작은 이미지에 효과적입니다:

✅ 5KB 미만의 아이콘
✅ 자주 변경되지 않는 이미지
✅ 첫 화면에 필수적인 이미지

반대로 큰 이미지는 외부 파일로 유지하는 것이 좋습니다:

❌ 10KB 이상의 사진
❌ 여러 페이지에서 사용되는 이미지
❌ 자주 업데이트되는 이미지

이미지를 Base64로 변환하려면 이미지 변환기를 사용해보세요!

이미지 최적화와 Base64: 언제 사용해야 할까?