외부 파일 대신 URL 자체에 데이터를 직접 포함하는 URI 스킴으로, 주로 HTML/CSS에 작은 이미지, 글꼴, 스크립트를 인라인으로 삽입하는 데 사용됩니다.

Data URI — 인라인 데이터 스킴 가이드

기술 세부사항

Data URI 구문: data:[mediatype][;base64],. 예: data:image/png;base64,iVBOR.... 장점: 작은 리소스에 대한 HTTP 요청 감소. 단점: Base64로 약 33% 크기 증가, 브라우저 캐시 불가, CSP(Content Security Policy)와 충돌 가능. 일반적으로 1-2KB 미만의 아이콘/SVG에만 사용합니다.

예시

```javascript
// Encode string to Base64
const encoded = btoa('Hello, World!');  // 'SGVsbG8sIFdvcmxkIQ=='

// Decode Base64 to string
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');  // 'Hello, World!'

// File to Base64 Data URI
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
// → 'data:image/png;base64,iVBORw0KGgo...'
reader.readAsDataURL(file);
```

Categories

Data URI

기술 세부사항

예시

관련 포맷

관련 도구

관련 용어