محول صور Base64
حوّل صورة إلى رابط بيانات (data URI) بترميز Base64، أو الصق نص Base64 لتحويله مجددًا إلى صورة قابلة للتنزيل — كل شيء يعمل محليًا، لا يُرفع أي شيء.
249 مشاهدة
تعذّر فك الترميز كصورة — تحقق من نص Base64.
كيف تعمل
تعمل هذه الأداة في اتجاهين. في وضع صورة ← Base64، اختر ملفًا باستخدام منتقي الملفات الأصلي للمتصفح؛ تقرأ الأداة الملف بواسطة واجهة برمجة FileReader.readAsDataURL() وتنتج رابط بيانات (data URI) كاملًا — نصًا مثل data:image/png;base64,iVBORw0KG... — يُعرض في مربع واحد، بينما تُعرض حمولة Base64 الخام وحدها (بدون بادئة) في مربع ثانٍ حتى تحصل على الصيغة التي تحتاجها لاستخدامك، مع زر نسخ بضغطة واحدة لكل منهما. في وضع Base64 ← صورة، الصق إما رابط بيانات كاملًا أو نص Base64 الخام فقط في مربع النص؛ إذا لصقت Base64 خامًا دون بادئة، تضيف الأداة تلقائيًا ترويسة data:image/png;base64, حتى يتمكن المتصفح من عرضها، ثم تُظهر معاينة حية عبر عنصر <img> مع زر تنزيل يحفظ البايتات المفكوكة كملف صورة حقيقي.
يأخذ ترميز Base64 بيانات ثنائية ويمثّلها باستخدام 64 حرف ASCII قابلة للطباعة فقط (A–Z وa–z و0–9 و+ و/)، وهذا ما يسمح بتضمين صورة ثنائية بطبيعتها داخل صيغ نصية بحتة مثل HTML وCSS وJSON أو رابط URL. الآلية ثابتة ورياضية: كل 3 بايتات (24 بت) من الملف الأصلي تتحول إلى 4 أحرف Base64 بالضبط (4 × 6 بت)، تُكمَّل بعلامة = عندما لا يكون طول المدخل من مضاعفات 3. هذه النسبة — 3 بايتات دخول مقابل 4 أحرف خروج — هي أيضًا سبب كون مخرجات Base64 أكبر دائمًا بنحو 33% من البيانات الثنائية الأصلية — 4 مقسومة على 3 تساوي تقريبًا 1.333 — وهو عبء رياضي ثابت، وليس تقريبًا أو إعداد جودة.
ما يجب معرفته
تضمين صورة كرابط بيانات مباشرة داخل HTML أو CSS له ميزة حقيقية: يزيل طلب HTTP منفصلًا، وهذا مهم للأصول الصغيرة جدًا والمُعاد استخدامها بكثرة مثل الأيقونات أو الرسوم المصغّرة (sprites) أو شعار صغير مضمّن في قالب بريد إلكتروني حيث قد تُحظر الصور الخارجية. أما المقايضة فتنعكس مع أي شيء أكبر: لا يمكن للمتصفح تخزين رابط بيانات مؤقتًا (cache) بشكل مستقل كما يفعل مع ملف .png أو .jpg مرتبط، وهو يُضخّم حجم ملف HTML/CSS الذي يحتويه (بنفس النسبة ~33%)، ويمنع ذلك الملف من العرض حتى يكتمل تنزيل الكتلة المشفّرة بأكملها. كقاعدة عامة، روابط البيانات مناسبة للأصول التي تقل عن بضعة كيلوبايتات، وغير مناسبة للصور الفوتوغرافية أو الصور الرئيسية أو أي شيء قد يرغب المستخدم في تخزينه مؤقتًا عبر تحميلات الصفحة.
بادئة نوع MIME — جزء image/png أو image/jpeg أو image/webp في data:image/png;base64,... — ليست زخرفية. فهي ما يُخبر المتصفح (أو أي برنامج آخر يقرأ النص) بالمُفكِّك الذي يجب تسليم البايتات التالية إليه؛ فبدونها، أو بواحدة خاطئة، قد تفشل حمولة Base64 الصالحة في العرض أو تُعرض كنوع ملف خاطئ تمامًا. لهذا السبب بالتحديد تضيف هذه الأداة تلقائيًا بادئة PNG عندما تلصق Base64 خامًا دون أي بادئة — وهو افتراضي معقول، لكن يجب تبديله ليطابق الصيغة الفعلية للملف الأصلي إذا كنت تعرف أنه كان JPEG أو WebP.
الأسئلة الشائعة
لماذا تكون مخرجات Base64 أكبر دائمًا من الصورة الأصلية؟
يُرمّز Base64 كل 3 بايتات من المدخل الثنائي كـ4 أحرف نصية، لذا تكون المخرجات دائمًا حوالي 4/3 من حجم المدخل — أكبر بنحو 33%. هذه خاصية رياضية ثابتة للترميز (6 بت من المعلومات لكل حرف قابل للطباعة بدلًا من 8)، وليست ناتجة عن إعداد منخفض الجودة أو أداة غير فعّالة.
هل تُرفع صورتي إلى خادم لتحويلها؟
لا. يعمل كلا الاتجاهين بالكامل داخل متصفحك: يقرأ FileReader.readAsDataURL() الملف محليًا، ويحدث فك الترميز إلى صورة محليًا أيضًا. لا يُرسَل أي شيء إلى أي مكان.
متى يجب أن أستخدم رابط بيانات Base64 فعليًا بدلًا من ملف صورة عادي؟
يكون منطقيًا للأصول الصغيرة والمُعاد استخدامها بكثرة — الأيقونات، رسوم واجهة المستخدم المصغّرة، شعار في بريد HTML — حيث يفوق توفير طلب HTTP واحد زيادة الحجم بنسبة ~33%. وهو غير مناسب للصور الفوتوغرافية أو أي صورة تريد أن يخزّنها المتصفح مؤقتًا بشكل مستقل عبر الصفحات، لأن رابط البيانات المضمّن يُعاد تنزيله في كل مرة يُحمَّل فيها ملف HTML أو CSS المحتوي.
لصقت نص Base64 لكن لا يظهر شيء في المعاينة — لماذا؟
هناك سببان شائعان: النص يفتقد بادئة نوع MIME (أو تحتوي على واحدة خاطئة) — تضيف هذه الأداة تلقائيًا data:image/png;base64, إن لم تكن موجودة، لكن هذا يساعد فقط إذا كانت البايتات الأساسية بيانات PNG فعلًا — أو أن نص Base64 نفسه اقتُطع أو تلف (مثلًا بسبب مسافات بيضاء أو فواصل أسطر أُدرجت عند النسخ من مصادر معينة). تحقق من أن البادئة تطابق الصيغة الحقيقية وأنك نسخت النص كاملًا.
ما الفرق بين مربعي المخرجات "رابط البيانات الكامل" و"Base64 فقط"؟
رابط البيانات الكامل (الذي يبدأ بـdata:image/...;base64,) هو ما تلصقه مباشرة في خاصية src لـHTML أو داخل url() في CSS ليعرضه المتصفح فورًا. مربع Base64 فقط يزيل تلك البادئة، وهو ما تحتاجه عندما يتوقع برنامج أو واجهة برمجة تطبيقات أو ملف إعدادات الحمولة المشفّرة الخام فقط وسيُرفق معلومات النوع بشكل منفصل بنفسه.
أدوات مشابهة
الإبلاغ عن مشكلة
محول صور Base64
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!