الترميز

Data URI / صورة Base64

ترميز صورة إلى Data URI (data:image/…;base64,…) لإدراجها في CSS/HTML، وفك ترميز Data URI أو Base64 خام إلى ملف — كل ذلك مباشرة في المتصفح.

ستظهر معاينة الصورة هنا.

A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.

How to use it

Common uses

Things to keep in mind

Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.

A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.

مقالة عن هذه الأداة: Data URI: متى تُضمَّن الصور مباشرة في الكود

الأسئلة الشائعة

ما فائدة تضمين صورة كـ Data URI بدلًا من رابط عادي؟

يسمح Data URI بتضمين الصورة مباشرة داخل ملف CSS أو HTML كنص Base64، مما يقلل عدد طلبات HTTP المنفصلة، وهو مفيد للأيقونات الصغيرة أو الصور التي تظهر دائمًا مع الصفحة.

هل هناك عيوب لاستخدام Data URI بدلًا من ملف صورة منفصل؟

نعم، الصورة كنص Base64 أكبر بنحو 33٪ من حجمها الأصلي، ولا تستفيد من التخزين المؤقت (caching) للمتصفح كما يحدث مع ملف صورة عادي له رابط خاص به، كما أن المتصفحات وعملاء البريد الإلكتروني تفرض أحيانًا حدًا أقصى لحجم Data URI المقبول.

هل يتم رفع الصورة التي أختارها إلى خادم؟

لا، تحويل الصورة إلى Data URI أو فك ترميزها يتم بالكامل داخل متصفحك، ولا تغادر الصورة جهازك في أي لحظة.

هل يمكن استخدام Data URI لملفات SVG دون Base64؟

نعم. SVG نص (XML)، لذا يكفي بدلاً من Base64 استخدام percent-encoding للرموز الخاصة: data:image/svg+xml,%3Csvg...%3E. هذا الأسلوب أكثر إيجازًا ويبقى قابلاً للتحرير مباشرة داخل ملف CSS.

هل يمكن إدراج Data URI في سمة href أو خاصية background-image؟

نعم، يعمل Data URI في أي مكان يُتوقَّع فيه رابط لمورد — في src وhref وbackground-image ضمن CSS، وحتى في @import. الصياغة وحدود الحجم هي نفسها المطبّقة على وسم img.

مقالات: الترميز

Base64: ما فائدة الترميز وكيف يعمل

كيف يحوّل Base64 البيانات الثنائية إلى نص ASCII، ومتى نحتاج ذلك فعلاً.

Base32: ما الفرق بينه وبين Base64 ومتى يكون أنسب

أبجدية Base32 التي لا تميّز بين حالة الأحرف، والحالات التي تكون فيها أنسب من Base64.

URL Encode/Decode: الترميز بالنسبة المئوية في الروابط

كيف تتحول الأحرف الخاصة في العناوين والمعاملات إلى تسلسلات %XX.

HTML Entities: كيف تعرض الأحرف الخاصة بأمان

لماذا يجب الهروب من الأحرف < > & وكيف يمنع ذلك تعطّل الترميز.

JWT: بنية الرمز وماذا يعني "فك ترميز" JWT

الأجزاء الثلاثة لرمز JWT، ولماذا فك الترميز ليس نفس التحقق من التوقيع.

Unicode Escape: ماذا تعني تسلسلات \uXXXX

من أين تأتي تسلسلات مثل \u0041 في JSON وسلاسل جافاسكريبت، وماذا تعني.

ROT13 وشيفرة قيصر: استبدال بسيط للأحرف

لماذا تجعل إزاحة 13 حرفًا خوارزمية ROT13 عكسية ذاتيًا، ولماذا لا تزال تُستخدم اليوم.

Punycode: كيف تعمل النطاقات الدولية في DNS

كيف يتحول نطاق بأحرف غير لاتينية إلى صيغة ASCII تبدأ بالبادئة xn--.

شيفرة مورس: كيف يتحول النص إلى نقاط وشرطات

مبدأ ترميز الحروف كنقاط وشرطات، وأين لا تزال شيفرة مورس تُستخدم اليوم.

Gzip + Base64: ضغط البيانات لنقلها كنص

لماذا تُرمَّز البيانات الثنائية المضغوطة أيضًا بـ Base64 قبل وضعها في حقل نصي.

XML Entities: الهروب من الأحرف في مستندات XML

الكيانات الخمس الإلزامية في XML التي بدونها يتعطّل المستند أثناء التحليل.