data:image/xxx;base64,...، بحيث يمكنك تضمين الصورة مباشرة في HTML أو CSS أو JSON دون الحاجة إلى خدمة استضافة صور خارجية.نظرة عامة
Image → Base64 يحوِّل صورة محلية (PNG أو JPG أو GIF أو SVG أو WEBP وغيرها) إلى Data URL مُرمَّز بـ Base64 بالصيغة
كيفية استخدام هذه الأداة
الخطوة 1 — انقر على منطقة الإسقاط لفتح منتقي ملفات، أو أسقط صورة مباشرة عليها. الخطوة 2 — تقرأ الأداة الصورة وتحوِّلها إلى Base64 Data URL؛ يمكنك رؤية المعاينة واسم الملف وحجمه الأصلي وطول سلسلة Base64. الخطوة 3 — انقر "نسخ DataURL" لوضع السلسلة كاملةً على الحافظة؛ الصقها داخل
background: url('...') في CSS أو داخل <img src="..."> في HTML أو حقل JSON. الخطوة 4 — انقر "مسح" لإعادة التعيين ورفع صورة أخرى.حالات الاستخدام الشائعة
يقلل مطورو الواجهة الأمامية طلبات HTTP بتضمين الأيقونات الصغيرة (favicon وأيقونات الأزرار) داخل CSS؛ تضمين الصور في قوالب البريد الإلكتروني بحيث يراها المستلمون دون روابط خارجية؛ تحويل SVG إلى Data URL لاستخدامه كخلفية CSS؛ شحن أصول الصور داخل تطبيقات Electron أو إضافات Chrome؛ تضمين الصور في مستندات Markdown لتجنُّب اعتماد المسار؛ إرسال الصور كقيم حقول JSON إلى واجهة API.
التفاصيل التقنية
يستخدم التحويل واجهة
FileReader.readAsDataURL الأصلية في المتصفح. سلسلة Base64 أكبر بحوالي 4/3 من حجم الملف الأصلي (بزيادة 33٪). يكتشف Data URL نوع MIME تلقائياً (image/png و image/jpeg وما إلى ذلك). أبقِ الصور تحت حوالي 100 كيلوبايت — فـ Data URL الكبير يضخِّم HTML/CSS ويضر بأداء الرسم الأول. بالنسبة إلى SVG، عادةً ما يكون ترميز URL أصغر من Base64.الخصوصية والأمان
تحدث قراءة الصورة وترميزها بالكامل محلياً في متصفحك ولا تُرفع أبداً، فمن الآمن استخدامها مع لقطات الشاشة أو نماذج التصميم أو صور المنتجات التي تحتوي على محتوى حساس.