Data URI

Data URI (Inline Data Scheme)

A URL scheme that embeds file content directly within HTML, CSS, or JavaScript using the format data:[mediatype][;base64],data, eliminating the need for a separate HTTP request to fetch the resource.

技術的詳細

Data URIs follow the syntax: data:[][;charset=][;base64],. They are commonly used for small images (icons, SVGs), CSS backgrounds, and font files to reduce HTTP round trips. However, data URIs cannot be cached separately by the browser, increase HTML/CSS file size by ~33% (base64 overhead), and are subject to size limits in some browsers (2MB in older IE, generally unlimited in modern browsers). For SVG, the URL-encoded variant (data:image/svg+xml,...) avoids the base64 overhead entirely.

例

```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 M Meta Length Checker U URL Slug Generator X XML ↔ JSON Converter K Keyword Density Analyzer 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

Categories

Data URI

技術的詳細

例

関連フォーマット

関連ツール

関連用語