محوّل الصور إلى Base64 وفك الترميز

Base64 طريقة لكتابة البيانات الثنائية، مثل ملف صورة، باستخدام 64 حرفًا نصيًا آمنًا فقط: الحروف والأرقام وعلامة الجمع والشرطة المائلة. كل ثلاثة بايتات من الملف تصبح أربعة أحرف من النص. هذا يتيح للمحتوى الثنائي المرور عبر أنظمة لا تتعامل إلا مع النصوص، مثل JSON وسمات HTML وملفات CSS وبعض صيغ البريد الإلكتروني.

يغلّف data URI هذا النص بترويسة قصيرة تخبر المتصفح بمحتواه، مثل data:image/png;base64، يليها الملف المرمّز. يمكن للمتصفحات عرضه تمامًا مثل رابط صورة عادي.

متى تضمّن الصور

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

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

يمكنك أيضًا تنزيل data URI كملف نصي، وهو مفيد للسلاسل الطويلة جدًا أو عند الحاجة لإرسالها إلى زميل.

الصيغ الشائعة

تحويل PNG إلى Base64 هو الحالة الأكثر شيوعًا، لأن الأيقونات والشعارات عادةً ملفات PNG بشفافية. يعمل تحويل JPG إلى Base64 بالطريقة نفسها ويناسب الصور الصغيرة مثل الصور الرمزية. تُرمَّز ملفات SVG أيضًا؛ ولـ SVG قد يكون النص المرمّز كرابط أصغر، لكن Base64 هو الخيار الأكثر توافقًا.

في HTML

لاستخدام صورة Base64 في HTML، الصق مقتطف img في صفحتك. يتضمن مسبقًا نصًا بديلًا مبنيًا على اسم الملف والعرض والارتفاع، ما يساعد على منع إزاحات التخطيط. عدّل النص البديل ليصف الصورة لقارئات الشاشة.

في CSS

لصورة خلفية Base64 في CSS، الصق قاعدة background-image في ملف الأنماط. يناسب ذلك الأنماط والأيقونات الصغيرة. أبقِ الصور الكبيرة كملفات، لأن تضمينها يجعل ملف الأنماط كله أبطأ في التنزيل والتحليل.

Markdown وJSON

يعمل مقتطف Markdown في كثير من المحررات وأدوات التوثيق التي تقبل data URI. للواجهات البرمجية وJSON، استخدم مقتطف "Base64 فقط"، دون ترويسة data:، إلا إذا طلب توثيق الواجهة data URI كاملًا.

انتقل إلى علامة التبويب "Base64 إلى صورة" والصق سلسلة Base64 خامًا أو data URI كاملًا. تزيل الأداة المسافات وفواصل الأسطر، وتقبل الأحرف الآمنة للروابط، وتضيف الحشو المفقود، وتفك ترميز النص وتفحص البايتات الأولى للتعرف على نوع الصورة الحقيقي. ثم ترى الصورة وأبعادها وحجمها، وزر تنزيل بامتداد الملف الصحيح.

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

كقاعدة عامة، ضمّن الصور الأصغر من بضعة كيلوبايتات وأبقِ كل ما عداها ملفات. تحذّرك الأداة عندما تكون الصورة أكبر من 100 KB، لأن تضمينها سيجعل HTML أو CSS ثقيلًا. للصور الأكبر، اضغطها أولًا بأداة ضغط الصور لدينا أو حوّلها إلى WebP.

Base64 ترميز لا تشفير. يمكن لأي شخص فك ترميزه، لذا لا تعامله أبدًا كوسيلة لإخفاء صورة أو حمايتها.

الخصوصية

يحدث الترميز وفك الترميز بالكامل في متصفحك باستخدام دوال مدمجة. لا يُرفع أو يُخزّن أي شيء، والأداة مجانية وبلا حدود ولا تستهلك أرصدة EnhancerPro.

لماذا سلسلتي طويلة جدًا؟

كل ثلاثة بايتات تصبح أربعة أحرف، لذا تصبح صورة بحجم 30 KB نحو 40,000 حرف. هذا متوقع. إذا كانت طويلة جدًا لاستخدامك، فقلّل أبعاد الصورة أو اضغطها قبل الترميز.

فواصل الأسطر والبريد الإلكتروني

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

favicon والأيقونات

تضمين favicon كـ data URI يعمل في معظم المتصفحات، لكن ملف favicon.ico حقيقي وملفات PNG أكثر موثوقية للإشارات المرجعية والشاشات الرئيسية. ينشئ مولّد favicon لدينا المجموعة الكاملة.

شعار في توقيع البريد الإلكتروني

تحظر بعض برامج البريد الصور المرتبطة حتى يسمح بها القارئ، لكن دعم data URI المضمّنة يتفاوت أيضًا. للتوقيعات، يكون ملف PNG صغير مرتبط ومستضاف على موقعك عادةً الخيار الأكثر موثوقية، وBase64 بديل للأنظمة التي تتطلب كل شيء في كتلة HTML واحدة. أبقِ الشعار أقل من بضعة كيلوبايتات في الحالتين.

العناصر النائبة وصور التحميل

يمكن لنسخة صغيرة مموّهة من صورة مرمّزة بـ Base64 أن تظهر فورًا أثناء تحميل الصورة الكاملة. صغّر الصورة إلى عرض نحو 20 بكسل، ورمّزها، واستخدمها كخلفية خلف الصورة الحقيقية. لا تضيف إلا بضع مئات من البايتات إلى الصفحة.

تخزين الصور في JSON

تقبل بعض الواجهات البرمجية وملفات الإعداد الصور كسلاسل Base64. استخدم مقتطف "Base64 فقط" وراجع التوثيق لحدود الحجم. عندما تستلم مثل هذه البيانات، الصقها في أداة فك الترميز لتأكيد نوع الصورة وأبعادها قبل حفظها.

الاختبار والنماذج الأولية

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

التحقق مما تحتويه السلسلة

لا يعطي نص Base64 أي إشارة إلى محتواه. غالبًا ما تلمّح الأحرف الأولى إلى النوع، مثل iVBOR لـ PNG أو /9j/ لـ JPEG، لكن أداة فك الترميز هي الطريقة الموثوقة للمعرفة. فهي تقرأ توقيع الملف الحقيقي بدلًا من الوثوق بالتسمية في data URI.

قائمة فحص الأداء

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

التحويل ذهابًا وإيابًا

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