دليل أداء الويب

دليل Base64 Data URI — تضمين الوسائط في تطبيقات الويب

دليل شامل لـ Base64 Data URI: تضمين صور PNG و JPG و SVG في وسوم HTML و CSS وتأثير الأداء.

فهم مخطط Data URI (RFC 2397)

A Data URI is a URL scheme that allows web developers to embed small files directly inline within web documents (HTML, CSS, JSON) as text strings, bypassing traditional HTTP request fetching.

Standard Data URI Syntax:

data:[<mediatype>][;base64],<data>

Example: data:image/png;base64,iVBORw0KGgoAAA...

أمثلة التنفيذ عبر بيئات العمل

Code Examples:

1. Inline HTML Image Tag: <img src="data:image/svg+xml;base64,PHN2ZyB4..." alt="Logo" />

2. CSS Stylesheet Background: .icon-badge { background-image: url("data:image/png;base64,iVBORw0K..."); }

3. React Component: const Avatar = ({ base64Str }) => <img src={`data:image/jpeg;base64,${base64Str}`} alt="User Avatar" />;

تجربة الأدوات عبر الإنترنت

Need to convert images to Base64 Data URIs? Use our suite of 100% client-side tools: