🛠️

Whiz Tools

Build • Create • Innovate

مُفَكِّك صور Base64 وعارض | تحويل Base64 إلى صور

فك تشفير ومعاينة سلاسل الصور المشفرة بتنسيق Base64 على الفور. يدعم JPEG و PNG و GIF وغيرها من التنسيقات الشائعة مع معالجة الأخطاء للإدخالات غير الصالحة.

مُفَكِّك وصَفْحة عَرض صُور بِيَسْتَخْدِم Base64

ألصِق سلسلة صورة مشفَّرة بـ Base64 هنا لعرض الصورة.

معاينة الصورة

لا توجد صورة لعرضها. ألصِق سلسلة Base64 لرؤيتها مفككة تلقائيًا.

يدعم JPEG و PNG و GIF وغيرها من تنسيقات الصور الشائعة.

تعليمات

1. ألصِق سلسلة صورة مشفَّرة بـ Base64 في المنطقة النصية أعلاه.

2. سيتم فك تشفير الصورة تلقائيًا أثناء الكتابة، أو انقر على زر 'فك تشفير الصورة'.

3. ستظهر الصورة المفككة في منطقة المعاينة أدناه.

ملاحظة: يجب أن تبدأ السلسلة بـ 'data:image/' للحصول على أفضل النتائج، ولكن الأداة ستحاول فك تشفير السلاسل بدون هذا البادئة أيضًا.

📚

الوثائق

مفكك تشفير وعارض صور Base64

مقدمة

Base64 هو نظام ترميز ثنائي إلى نص يمثل البيانات الثنائية في تنسيق سلسلة ASCII. يُستخدم عادةً لتضمين بيانات الصور مباشرةً داخل HTML وCSS وJavaScript وJSON وغيرها من التنسيقات النصية حيث لا يمكن تضمين البيانات الثنائية بشكل مباشر. تتيح لك هذه الأداة فك تشفير سلاسل الصور المشفرة بـ Base64 وعرض الصور الناتجة مباشرةً في متصفحك.

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

تقدم أداة مفكك تشفير صور Base64 واجهة بسيطة حيث يمكنك لصق سلسلة صورة مشفرة بـ Base64 ورؤية الصورة المفككة على الفور. تدعم جميع تنسيقات الصور الشائعة بما في ذلك JPEG وPNG وGIF وWebP وSVG، ويمكنها التعامل مع كل من تنسيق عنوان البيانات (مع بادئة data:image/...) وسلاسل Base64 الخام.

التفاصيل الفنية

تنسيق ترميز Base64

يقوم ترميز Base64 بتحويل البيانات الثنائية إلى مجموعة من 64 حرف ASCII (A-Z وa-z و0-9 و+ و/)، مع استخدام = للتعبئة. بالنسبة للصور على الويب، يتم عادةً تنسيق بيانات Base64 كعنوان بيانات بالهيكل التالي:

1data:[<media type>][;base64],<data>
2

على سبيل المثال، قد تبدو صورة PNG مشفرة بـ Base64 كما يلي:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

تتكون مكونات هذا التنسيق من:

  • data: - نظام عنوان URL
  • image/png - نوع MIME للبيانات
  • ;base64 - طريقة الترميز
  • , - فاصل بين الرأس والبيانات
  • البيانات المشفرة بـ Base64 الفعلية

عملية فك التشفير

عند فك تشفير سلسلة صورة مشفرة بـ Base64، تحدث الخطوات التالية:

  1. يتم تحليل السلسلة لتحديد ما إذا كانت تحتوي على بادئة عنوان بيانات
  2. إذا كانت هناك بادئة، يتم استخراج نوع MIME لتحديد تنسيق الصورة
  3. يتم عزل جزء بيانات Base64 وفك تشفيره إلى بيانات ثنائية
  4. يتم تحويل البيانات الثنائية إلى Blob أو عنوان كائن يمكن عرضه كصورة

إذا لم يتضمن الإدخال بادئة عنوان بيانات، فإن المفكك يحاول معالجته كسلسلة Base64 خام ويستنتج نوع الصورة من رأس البيانات الثنائية المفككة أو الافتراضية إلى PNG.

تنسيقات الصور المدعومة

تدعم هذه الأداة جميع تنسيقات الصور الشائعة على الويب:

التنسيقنوع MIMEحالات الاستخدام الشائعة
JPEGimage/jpegالصور، الصور المعقدة ذات الألوان المتعددة
PNGimage/pngالصور التي تتطلب الشفافية، لقطات الشاشة، الرسوميات
GIFimage/gifالرسوم المتحركة البسيطة، الصور ذات الألوان المحدودة
WebPimage/webpتنسيق حديث مع ضغط أفضل من JPEG/PNG
SVGimage/svg+xmlالرسوميات المتجهة، الأيقونات والرسوم التوضيحية القابلة للتغيير

حالات الاستخدام

لدى الصور المشفرة بـ Base64 العديد من التطبيقات العملية في تطوير الويب وما بعده:

  1. تضمين الصور في HTML/CSS/JS: يقلل من طلبات HTTP من خلال تضمين الصور مباشرةً في الكود الخاص بك، مما يمكن أن يحسن أوقات تحميل الصفحة للصور الصغيرة.

  2. قوالب البريد الإلكتروني: يضمن عرض الصور بشكل صحيح في عملاء البريد الإلكتروني الذين يقومون بحظر الصور الخارجية بشكل افتراضي.

  3. التطبيقات ذات الملف الواحد: ينشئ تطبيقات HTML ذات محتوى ذاتي حيث يتم تضمين جميع الموارد ضمن ملف واحد.

  4. استجابات API: يتضمن بيانات الصورة مباشرةً في استجابات JSON دون الحاجة إلى نقاط نهاية صور منفصلة.

  5. عناوين البيانات في CSS: يدمج الأيقونات الصغيرة وصور الخلفية مباشرةً في ملفات CSS.

  6. تلاعبات Canvas: يسهل حفظ ونقل بيانات صورة Canvas.

  7. التطبيقات غير المتصلة بالإنترنت: يخزن الصور كسلاسل نصية في localStorage أو IndexedDB.

اعتبارات الأداء

بينما يوفر ترميز Base64 سهولة الاستخدام، إلا أنه يأتي مع بعض العيوب:

  • زيادة حجم الملف: يزيد ترميز Base64 من حجم البيانات بحوالي 33%.
  • عدم تخزين المتصفح: لا يمكن تخزين الصور المدمجة بشكل منفصل مثل ملفات الصور الخارجية.
  • عبء تحليل: يجب على المتصفحات فك تشفير سلسلة Base64 قبل العرض.
  • تحديات الصيانة: من الصعب تحديث الصور المدمجة مقارنةً بالملفات المرجعية.

لتحقيق أداء أمثل، يُوصى عادةً باستخدام ترميز Base64 فقط للصور الصغيرة (أقل من 10KB). عادةً ما تكون الصور الأكبر أفضل خدمة كملفات منفصلة يمكن تخزينها وتحسينها بشكل صحيح.

البدائل

توجد عدة بدائل لترميز Base64 لمختلف حالات الاستخدام:

  1. تضمين SVG داخل النص: بالنسبة للرسوميات المتجهة، غالبًا ما يوفر SVG المضمن أداءً ومرونة أفضل من SVG المشفر بـ Base64.

  2. WebP والتنسيقات الحديثة: توفر ضغطًا أفضل من JPEG/PNG المشفر بـ Base64.

  3. صور الرمز: تجمع بين عدة صور صغيرة في ملف واحد وتستخدم موضع CSS.

  4. CDNs (شبكات توصيل المحتوى): بالنسبة لمواقع الإنتاج، يعد تقديم الصور المحسنة من CDN أكثر كفاءة.

  5. ضغط البيانات: لنقل كميات كبيرة من البيانات الثنائية، تعتبر خوارزميات الضغط المتخصصة مثل gzip أو Brotli أكثر كفاءة من Base64.

أمثلة على الشيفرات

إليك أمثلة على العمل مع الصور المشفرة بـ Base64 في لغات برمجة مختلفة:

1// تحويل صورة إلى Base64 في JavaScript (المتصفح)
2function imageToBase64(imgElement) {
3  const canvas = document.createElement('canvas');
4  canvas.width = imgElement.width;
5  canvas.height = imgElement.height;
6  
7  const ctx = canvas.getContext('2d');
8  ctx.drawImage(imgElement, 0, 0);
9  
10  // الحصول على عنوان البيانات (سلسلة Base64)
11  return canvas.toDataURL('image/png');
12}
13
14// عرض صورة Base64
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // التعامل مع السلاسل بدون بادئة عنوان البيانات
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

تنفيذ HTML

إليك كيفية تضمين صورة مشفرة بـ Base64 مباشرةً في HTML:

1<!-- تضمين صورة مشفرة بـ Base64 مباشرةً في HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="صورة مشفرة بـ Base64">
3
4<!-- استخدام CSS مع صورة خلفية مشفرة بـ Base64 -->
5<style>
6.base64-bg {
7  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8  width: 100px;
9  height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13

التاريخ

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

تم توثيق نظام الترميز رسميًا في عام 1987 مع نشر RFC 989، الذي حدد معيار البريد الإلكتروني المحسن للخصوصية (PEM). تم تحديث هذا لاحقًا في RFC 1421 ومعايير أخرى ذات صلة. يأتي مصطلح "Base64" نفسه من حقيقة أن الترميز يستخدم 64 حرف ASCII مختلف لتمثيل البيانات الثنائية.

في سياق تطوير الويب، اكتسبت الصور المشفرة بـ Base64 شعبية مع ظهور عناوين البيانات، التي تم اقتراحها لأول مرة في RFC 2397 في عام 1998. سمح هذا بتضمين البيانات الثنائية مباشرةً في HTML وCSS وغيرها من الوثائق على الويب.

أصبح استخدام الصور المشفرة بـ Base64 في تطوير الويب أكثر انتشارًا في منتصف العقد الأول من القرن الحادي والعشرين حيث سعى المطورون إلى طرق لتقليل طلبات HTTP وتحسين أوقات تحميل الصفحة. تم تبني التقنية بشكل خاص خلال ارتفاع تطوير الويب المحمول، حيث كان تقليل الطلبات أمرًا حاسمًا للأداء على الاتصالات المحمولة الأبطأ.

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

المراجع

  1. RFC 4648: ترميزات البيانات Base16 وBase32 وBase64
  2. RFC 2397: نظام عنوان "البيانات"
  3. وثائق MDN Web: عناوين البيانات
  4. CSS-Tricks: عناوين البيانات
  5. مفكك تشفير صورة Base64
  6. هل يمكنني استخدام: عناوين البيانات
  7. أداء الويب: متى يجب ترميز الصور بـ Base64 (ومتى لا)