Data URI
Data URI (인라인 데이터 스킴)
외부 파일 대신 URL 자체에 데이터를 직접 포함하는 URI 스킴으로, 주로 HTML/CSS에 작은 이미지, 글꼴, 스크립트를 인라인으로 삽입하는 데 사용됩니다.
기술 세부사항
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);
```
관련 포맷
관련 도구
H
Hash Generator
S
SERP Preview
O
OG Tag Debugger
H
Heading Analyzer
P
Password Generator
K
Keyword Density Analyzer
R
Readability Score
U
Unix Timestamp Converter
X
XML Sitemap Generator
S
Schema.org Generator
C
Cron Expression Generator
L
Link Extractor
C
Canonical Tag Checker
C
Chmod Calculator
R
Robots.txt Analyzer
S
String Escape / Unescape
I
IP Subnet Calculator
S
Structured Data Validator
C
Color Code Converter
W
Word Count & SEO Grade
메
메타 길이 검사기
C
CSV ↔ JSON Converter
U
URL 슬러그 생성기
X
XML ↔ JSON Converter
키
키워드 밀도 분석기
S
SQL Formatter
M
Markdown Table Generator
H
HTTP Status Code Reference
M
Meta Tags Generator
R
Robots.txt Generator
.
.gitignore Generator
H
HTML Formatter
C
CSS Unit Converter
J
JSONPath Evaluator
T
Text Diff Checker
D
Data URI Converter
L
Lorem Ipsum Generator
P
Path Converter
.
.htaccess Generator
.
.env Validator
P
Placeholder Image Generator