صورة ↔ Base64

ما تحويل الصورة إلى Base64؟#

data URL هو نصّ يُضمِّن ملفًا كاملًا داخله، مسبوقًا بنوع MIME الخاص به: data:image/png;base64,iVBORw0KGgo…. ما إن تعيش الصورة داخل مثل هذا النص حتى تتصرف كأنها نصّ عاديّ — يمكنك لصقها في HTML أو CSS أو JSON أو ملف Markdown أو ملف شيفرة، ويعرضها المُستهلِك دون الحاجة لجلب ملف منفصل إطلاقًا. تحوّل هذه الصفحة ملف صورة إلى data URL وتحوّل data URL إلى صورة قابلة للعرض، كل ذلك داخل متصفّحك.

يزيد Base64 حجم البيانات الثنائية بنحو 33% (كلّ ثلاثة بايتات تصبح أربعة محارف ASCII)، لذا فإنّ data URL أكبر من الملف الذي يحل محلّه. لكنّ هذا التبادل يستحق العناء عندما تريد صفر طلبات خارجية: تواقيع رسائل البريد الإلكتروني بصيغة HTML، والعروض التوضيحية ذات الملف الواحد، والفافيكون المُضمَّن داخل <head>، والأيقونات المُجمَّعة داخل إعداد JSON، أو الأصول في بيئات (بعض الصفحات المقفولة بـ CSP، والمعاينات المعزولة) حيث لا يكون تحميل <img src> من القرص خيارًا متاحًا.

تحلّل هذه الأداة data URL وفق RFC 2397، وتقبل كلًّا من حمولات النص base64 والمُرمَّزة URL، وتكشف MIME، وتتحقّق من أنّه صورة فعلًا قبل المعاينة — لذا فإنّ لصق نصّ مكسور سيفشل بشكل واضح بدلًا من عرض أيقونة صورة مكسورة.

كيف تستخدمها#

1. أفلت صورة على المنطقة المتقطّعة، أو انقر رفع واختر ملفًا. تُقبل الصور بأنواع PNG وJPEG وWebP وGIF وSVG وBMP وAVIF وICO.
2. تُملأ منطقة النصّ Base64 data URL على اليسار بسلسلة data:image/…;base64,… الكاملة. استخدم نسخ على اليمين لأخذها.
3. للذهاب في الاتجاه المعاكس، الصق data URL في منطقة النص نفسها. تُعيد المعاينة على اليمين رسم الصورة، ويُنزِّل تنزيل ملفًا حقيقيًا بالامتداد الصحيح.
4. مسح يُفرّغ اللوحتين.

تُقرأ قيمة MIME من ترويسة data URL، لا تُخمَّن من امتداد الملف — لذا فإنّ إعادة تسمية .png إلى .jpg لن تخدع الأداة، وامتداد التنزيل يطابق دائمًا النوع الفعلي.

أبرز المزايا#

• تحويل ثنائي الاتجاه. صورة ← data URL للتضمين؛ data URL ← ملف للاستخراج. تُدير اللوحة نفسها الاتجاهين.
• يدرك MIME. يُشتقّ امتداد التنزيل المقترح من نوع الوسائط الفعلي (image/svg+xml ← .svg، image/jpeg ← .jpg)، لا من اسم الملف.
• يتحقق قبل المعاينة. تُعلَّم النصوص غير السليمة بأنّها غير صالحة بدلًا من عرض صورة مكسورة بصمت.
• يتعامل مع البايتات التعسفية بأمان. يُقطَّع ترميز Base64 بحيث تذهب الحمولات متعددة البايتات والثنائية وتعود دون تلف.
• يبقى محليًّا. تُؤدّي واجهات FileReader وatob/btoa العمل داخل الصفحة؛ لا يُرفع أيّ شيء.

مثال عملي#

لديك pixel.gif، بكسل شفّاف مقاس 1×1 لتتبّع الفتح (النوع الذي تستخدمه عملاء البريد كإشارة افتتاح)، حجمه 43 بايت. ارفعه. تُنتج منطقة نصّ data URL السلسلة الكاملة مضبوطة:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

هذا data URL حقيقيّ كامل — الصققه داخل <img src="…"> في HTML، أو في background-image: url('…') في CSS، أو في حقل JSON ويعرض المُستهلِك البكسل الأصلي دون جلب أيّ ملف. تأتي قيمة MIME (image/gif) وامتداد التنزيل .gif كلاهما من ترويسة data URL، لا من اسم الملف الأصلي.

بالنسبة لصورة فوتوغرافية أكبر فالمبدأ نفسه — لا ينمو إلا جسم base64 (بنحو 1.33× حجم البايتات) وتصبح قيمة MIME ‏image/jpeg أو image/webp.

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

لماذا data URL الخاص بي أكبر بكثير من الملف الأصلي؟#

يمثّل Base64 كلّ ثلاثة بايتات بأربعة محارف، لذا فالنصّ يعادل نحو 1.33× الحجم الثنائي. بالنسبة للصور الكبيرة فهذا إسراف — جرّب أداة الضغط أولًا، أو استضف الملف وأشِر إليه بدل التضمين.

هل يوجد حدّ للحجم؟#

يتعامل المتصفح مع data URL حتى مئات الميغابايت، لكن عمليًّا أيّ حجم يتجاوز بضع مئات من KiB ينتفخ به HTML وCSS وJSON ويُبطئ المحلّلات اللغوية. ضمّن فقط الأيقونات والشعارات والسبوريت الصغيرة.

هل يمكنني تحويل SVG؟#

نعم. نوع SVG هو image/svg+xml وهو أصلًا نصّ، لذا فـ data URL مضغوط ويعود دون فقدان.

data URL الذي لصقته يقول «غير صالح». ما الذي حدث؟#

يجب أن يبدأ النصّ بـ data: وأن يحتوي على فاصلة تفصل الترويسة عن الحمولة. النسخ الناقص، أو مسافة بادئة عرضية، أو غياب عَلَم ;base64 — كلّها تفشل التحليل. أعد نسخ السلسلة كاملةً، بما فيها الترويسة.