حوّل بين ملفات الصور و Base64 (Data URI)
حوّل في 3 خطوات سهلة:
اسحب وأفلت ملف الصورة هنا، أو انقر للاختيار
التنسيقات المدعومة: PNG، JPEG، GIF، WebP، SVG (يُفضل 10MB كحد أقصى)
يُستخدم تشفير Base64 للصور بشكل شائع في تطوير الويب للأغراض التالية:
قم بتضمين الأيقونات أو صور الشعار الصغيرة مباشرة في وسوم <img> في HTML أو خصائص background-image في CSS لتقليل طلبات HTTP وتحسين سرعة تحميل الصفحة. مفيد بشكل خاص كبديل لخطوط الأيقونات.
بدلاً من دمج عدة صور صغيرة في ملف 'CSS sprite' واحد، قم بتشفير كل صورة إلى Base64 وتضمينها في CSS لتسهيل الإدارة.
بعض عملاء البريد الإلكتروني يحظرون تحميل الصور الخارجية. يضمن تضمين الصور الهامة (مثل الشعارات) كـ Data URIs عرضها بشكل موثوق.
عند إرسال/استقبال بيانات الصور عبر واجهات برمجة تطبيقات JSON، يسمح تشفير Base64 بالتعامل مع البيانات الثنائية كتنسيق نصي. يتم نقل الصور بتنسيق JSON بسيط دون الحاجة إلى اتصال متعدد الأجزاء.
في تطبيقات الويب التقدمية (PWA) أو تطبيقات Electron، يضمن تضمين الصور المشفرة بـ Base64 في HTML عرض الصور بشكل موثوق حتى في بيئات عدم الاتصال بالإنترنت.
استخدام الصور المشفرة بـ Base64 في الأطر متعددة المنصات مثل React Native و Ionic و Flutter يوحد معالجة الصور عبر المنصات.
Data URI (تسمى أيضًا Data URL) هي مخطط URL يسمح بتضمين الملفات الصغيرة مثل الصور أو الخطوط مباشرة في HTML أو CSS. يقوم بتحويل محتوى الملف إلى نص باستخدام تشفير Base64 ويمثله كجزء من URL.
تُكتب Data URI بالتنسيق التالي:
data:[نوع MIME]؛[طريقة التشفير]،[البيانات المشفرة] مثال (PNG): data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
يمكن تحويل جميع تنسيقات الصور المدعومة من قبل المتصفح بما في ذلك PNG و JPEG و GIF و WebP و SVG. يعد PNG و JPEG الأكثر شيوعًا.
لا يوجد حد تقني، ولكن لاعتبارات الأداء وذاكرة المتصفح، يُوصى بحجم 10MB أو أقل. من الناحية العملية، تكون الصور بحجم 5KB أو أقل هي الأكثر فعالية.
يزيد تشفير Base64 حجم الملف إلى حوالي 133% من الحجم الأصلي (زيادة حوالي 33%). على سبيل المثال، تصبح صورة بحجم 9KB تقريبًا 12KB كسلسلة Base64.
نعم، يمكن تحويل صور PNG الشفافة كما هي. يتم الاحتفاظ بمعلومات الشفافية، بحيث يتم عرضها بشكل صحيح بالشفافية عند تضمينها في HTML أو CSS.
الصق مباشرة في خاصية src لوسم <img>. مثال: <img src="data:image/png;base64,iVBORw0KG...">
الصق داخل دالة url() مثل: background-image: url('data:image/png;base64,iVBORw0KG...');
لا، تتم كل المعالجة في متصفحك. لا يتم إرسال بيانات الصور إلى أي خادم على الإطلاق.
نعم، هذه الأداة مجانية تمامًا ويمكن استخدامها بحرية للأغراض التجارية وغير التجارية.
Encode image data in Base64
Convert image file formats
Encode and decode Base64