محول الصورة إلى تنسيق BASE64

جارٍ استعادة الملف المحدد...

يجمع عنوان بيانات Base64 نوع الوسائط والبايتات المرمزة للصورة في قيمة نصية واحدة مثل data:image/png;base64,.... اختر صورة بحجم يصل إلى 20 ميبيبايت، وسيُنشئ المحول هذه القيمة محليًا في متصفحك. قبل النسخ، يمكنك مراجعة معلومات الملف الأصلي والطول التقريبي لعنوان البيانات الناتج.

كيفية ترميز الصورة باستخدام Base64

  1. 1

    اختر صورة

    اختر ملف صورة واحدًا بحجم لا يتجاوز 20 ميبيبايت.

  2. 2

    رمّزها محليًا

    يقرأ المتصفح الملف وينشئ عنوان بيانات Base64 كاملًا دون رفعه إلى الخادم.

  3. 3

    راجع النتيجة

    تحقق من نوع الوسائط وبيانات الملف والطول التقريبي لعنوان البيانات الناتج.

  4. 4

    انسخ عنوان البيانات

    انسخ القيمة الكاملة `data:image/...;base64,...` إلى الحافظة.

متى يتم عرض النص بشكل مباشر، ومتى يتم ربطه؟

يتيح تضمين بيانات بتنسيق Base64 حفظ طلب HTTP، على الرغم من زيادة حجمه بنسبة 33٪؛ وهو أمر مفيد بالنسبة لبعض الموارد، بينما يكون غير ضروري بالنسبة إلى أخرى.

قياس الحجم

الحجم الأصلي حجم بصيغة Base64 البايت الإضافية
1 KB 1.36 KB 360 B
10 KB 13.6 KB 3.6 KB
100 KB 136 KB 36 KB
1 MB 1.36 MB 360 KB

دليل اتخاذ القرار

حالة الاستخدام مضمّنة أو خارجية
أيقونة أقل من 2 كيلوبايت (شعار SVG، سبرايت) مضمّنة
صورة المؤشر في CSS (cursor: url()) مضمّنة
نموذج HTML أو CSS صغير ومستقل مضمّنة
أيقونة مضمّنة في حمولة جافا سكريبت مضمّنة
الصورة الرئيسية (Hero)، أكبر من 50 كيلوبايت خارجية
أي شيء يمكن تخزينه مؤقتًا بشكل منفصل خارجية

تنسيق URI للبيانات

data:[<mediatype>][;base64],<data>

أمثلة:

  • data:image/png;base64,iVBORw0KGgo...، PNG
  • data:image/svg+xml;utf8,<svg>...</svg>، بصيغة SVG، وغالبًا ما يكون من الأفضل تضمينه مباشرةً دون استخدام ترميز Base64
  • data:image/jpeg;base64,/9j/4AAQS...، JPG

نصائح

  • غالبًا ما يكون تنسيق SVG أفضل عند استخدامه كـ url() مع ترميز utf8 بدلاً من Base64؛ فهو أقصر وأسهل في القراءة.
  • لا يفحص الترميز الصورة ولا يزيل محتواها غير الآمن. لا تضمّن إلا الملفات الموثوقة، وخاصة SVG الذي قد يحتوي عناصر نشطة أو خارجية.
  • قد يؤدي وجود صور كبيرة داخل حمولات بيانات JSON إلى تعطيل عملية تحليلها إذا كانت ضخمة جدًا؛ لذا يُنصح باستخدام تقنية المحتوى المتعدد الأجزاء أو الاستعانة بمراجع خارجية.
  • استخدام صورة خلفية بتنسيق CSS مع ترميز Base64 داخل الكود يُحسّن من التنظيم، لكنه يعيق عملية التخزين المؤقت على مختلف الصفحات.

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

يقوم تنسيق Base64 بتشفير 3 بايتات من البيانات المدخلة باستخدام 4 أحرف، وبالتالي يكون الحجم الناتج دائمًا أكبر بنسبة تقارب 33٪ مقارنة بالبيانات المدخلة؛ فمثلاً، تنتج صورة بحجم 10 كيلوبايت سلسلة من حوالي 13,600 حرف، ومن الطبيعي أن تكون هذه السلسلة طويلة.

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

لا، ترميز Base64 يتم تنفيذه مباشرةً في متصفحك، ولا تغادر الصورة جهازك أبدًا.

ليس في أداة الترميز هذه. استخدم أداة Base64 إلى صورة المنفصلة لتحويل عنوان بيانات أو سلسلة Base64 خام إلى ملف صورة قابل للتنزيل.

أدوات ذات صلة