محوّل الصور إلى Base64 وBase64 إلى صورة

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

Base64 نظام ترميز يحوّل أي بيانات ثنائية — صورة أو ملف أو أي بايتات — إلى نص مؤلف من 64 محرفًا فقط، بحيث يمكن نسخ هذا النص أو لصقه أو تضمينه في مكان لا يقبل سوى النصوص. حين يوضع هذا النص داخل رابط بصيغة data:image/png;base64,… يصبح ما يسمى رابط بيانات، وهو صورة كاملة مكتوبة كسطر واحد يمكن وضعه مباشرة داخل HTML أو CSS دون أن تكون هناك صورة منفصلة على القرص.

في اتجاه صورة إلى Base64 تقبل الأداة صيغ PNG وJPEG وGIF وWebP وBMP وSVG وICO. وفي الاتجاه المعاكس لا يشترط النص أن يبدأ بالبادئة data؛ يكفي نص Base64 مجرّد، لأن الأداة تتعرّف على نوع الصورة من أول بايتاتها مباشرة: صور PNG تبدأ دائمًا بالبايتات 89 50 4E 47 0D 0A 1A 0A، وJPEG بـ FF D8 FF، وGIF بالحروف GIF87a أو GIF89a، وWebP بالكلمة RIFF ثم WEBP عند الإزاحة 8، وBMP بالحرفين BM. هذه التواقيع جزء ثابت من كل صيغة.

التنفيذ نفسه يتجنب خطأ شائعًا في هذا النوع من الأدوات: الدالة الأصلية btoa في المتصفح تتوقف عن العمل عند أي محرف فوق U+00FF، فقراءة ملف الصورة كنص عادي ثم ترميزه تُتلف البيانات الثنائية أو ترفضها. لهذا تقرأ هذه الأداة الملف كبايتات خام وترمّزها على دفعات بدل تمريرها دفعة واحدة، لأن مصفوفة بايتات كبيرة تُمرَّر كوسائط لدالة واحدة تتجاوز حدود مكدس الاستدعاءات في جافاسكريبت.

طريقة الاستخدام

1. اختر الاتجاه المناسب: بدّل بين صورة إلى Base64 عندما يكون لديك ملف صورة تريد ترميزه، وBase64 إلى صورة عندما يكون لديك نص Base64 أو رابط بيانات تريد تحويله إلى صورة.
2. أفلت الصورة أو اخترها: في وضع صورة إلى Base64 اسحب ملف PNG أو JPEG أو GIF أو WebP أو BMP أو SVG أو ICO إلى منطقة الإفلات، أو استخدم زر اختيار صورة، بحد أقصى 10 ميغابايت؛ وفي وضع Base64 إلى صورة الصق النص كاملًا في مربع النص المخصص بدلًا من ذلك.
3. انسخ ما تحتاجه أو نزّله: بعد الترميز تظهر أربع نسخ جاهزة للنقر — Base64 الخام ورابط البيانات وخلفية CSS ووسم img — إلى جانب لوحة تعرض اسم الملف ونوعه وحجمه الأصلي وعدد محارف Base64 ونسبة الزيادة والأبعاد بالبكسل؛ وفي وضع فك الترميز تظهر معاينة للصورة مع زر تنزيل الصورة.

متى تُضمّن الصورة داخل الصفحة ومتى تُبقيها ملفًا منفصلًا

أول ما يخسره رابط البيانات هو التخزين المؤقت المستقل: الصورة المضمّنة كنص Base64 ليست ملفًا قائمًا بذاته بل جزء من ملف HTML أو CSS الذي يحملها، فهي تُعاد قراءتها في كل مرة يتغيّر فيها ذلك الملف، ولا يمكن إعادة استخدامها عبر صفحات أخرى كما تُستخدم صورة عادية محفوظة في مسارها الخاص.

الصورة المضمّنة أيضًا لا يمكن تحميلها بتكاسل ولا تقديمها بأبعاد متجاوبة، إذ لا مكان فيها لخاصية التحميل المؤجل ولا لقائمة srcset التي تختار الحجم المناسب لكل شاشة؛ المتصفح يحمّلها فور تحميل الملف الذي تسكن فيه، سواء ظهرت فورًا على الشاشة أم لا.

وإذا كانت مضمّنة داخل ملف CSS فهي تقع داخل مورد يوقف عرض الصفحة حتى تحميله بالكامل، أي أنها قد تؤخر أول رسم للصفحة، على عكس صورة عادية يمكن للمتصفح جلبها بالتوازي دون أن تعطّل شيئًا.

الخلاصة الصادقة: ضمّن الصور الصغيرة الثابتة التي تحتاجها الصفحة دائمًا، مثل أيقونة صغيرة أو تدرّج لوني بسيط من بكسل واحد، وأبقِ الصور الفوتوغرافية وأي صورة تتكرر عبر أكثر من صفحة كملف مستقل يستفيد من التخزين المؤقت وإعادة الاستخدام.

حقيقة حجم Base64: ليست زيادة 33% دائمًا

الحساب معروف: Base64 يأخذ ثلاثة بايتات في كل مرة ويكتبها كأربعة محارف من أبجدية مؤلفة من 64 رمزًا، فيكون طول الناتج بالضبط 4 × ceil(n ÷ 3) محرفًا لعدد بايتات n، وهذا مؤكَّد لكل طول من 0 إلى 4000 بايت. حين لا يكون عدد البايتات مضاعفًا للثلاثة يُستكمل الناتج بمحرف = أو محرفين: 3 بايتات تعطي 4 محارف دون أي استكمال، و4 بايتات تعطي 8 محارف مع علامتي =، و5 بايتات تعطي 8 محارف مع علامة = واحدة. الزيادة النظرية القصوى هي بالضبط ثلث الحجم، أي 33.33%.

لكن هذا الرقم يخصّ النص المفكوك فقط، وهو غالبًا غير صحيح عمليًا بشأن ما ينتقل فعلًا عبر الشبكة، لأن الاستجابات تُضغط بـ gzip قبل الإرسال. السبب أن Base64 يستخدم 64 رمزًا مختلفًا فقط، وهذا يعادل بالضبط 6 بتات من المعلومة في كل محرف من 8 بتات — وهو ما تأكد مباشرة: 64 رمزًا مختلفًا، وlog2(64) يساوي 6.00 بت بالضبط. مرحلة هوفمان في خوارزمية Deflate تلتقط هذا الفائض وتستعيد تقريبًا كامل نسبة التوسّع التي أحدثها الترميز.

القياس على صور PNG بأحجام متزايدة يوضح ذلك: عند 8×8 بكسل كانت الزيادة بعد الضغط 11.3%؛ وعند 16×16 بكسل 4.2%؛ وعند 32×32 بكسل 1.5%؛ وعند 64×64 و128×128 و256×256 و512×512 بكسل استقرت الزيادة عند 0.9% تقريبًا في جميعها. وفي اختبار مقابل على 60,000 بايت من بيانات عشوائية غير قابلة للضغط أصلًا، كانت الزيادة 33.33% في الشكل الخام لكنها لم تتجاوز 0.97% بعد الضغط.

الخلاصة: فوق استجابة HTTP عادية مضغوطة بـ gzip، تضمين صورة كـ Base64 يكلّف نحو 1% تقريبًا وليس 33%، بدءًا من حجم 64×64 بكسل تقريبًا وما فوقه. واقرأ الرقم على أنه «نحو واحد بالمئة» لا ثابتًا دقيقًا: فهو يتوقف على تطبيق Deflate الذي يضغط الاستجابة، وقد اختلف تطبيقان قيسا هنا بأعشار قليلة. الزيادة الحقيقية لا تظهر فعليًا إلا في الصور الصغيرة جدًا، حيث تطغى تكاليف الجداول الداخلية لخوارزمية الضغط نفسها.

لماذا هذه الأداة مجانية؟

كل عملية ترميز أو فك ترميز تجري بجافاسكريبت داخل متصفحك مباشرة، فلا تُرفع الصورة ولا نص Base64 إلى أي خادم، ولا تمر ببرمجية وسيطة تحلّل الملف أو تخزّنه.

لهذا لا حاجة لإنشاء حساب ولا لدفع أي رسوم، ولا تضاف أي علامة مائية على الناتج، ولا يوجد سقف يومي لعدد مرات الاستخدام. وقد جرى التحقق من صحة الترميز وفك الترميز مقابل وحدة base64 في بايثون، على آلاف المدخلات الثنائية العشوائية بمختلف الأطوال.