How do I use the Base64 output in HTML?

Copy the full data URL and use it as the src attribute of an img tag: . You can also use it in CSS as a background-image value.

Why is the Base64 string longer than the original image?

Base64 encoding increases file size by approximately 33% because it encodes 3 bytes of binary data as 4 ASCII characters. This is why Base64 embedding is recommended only for small images under 5-10 KB.

Can I use Base64 images in email templates?

Yes, but some email clients like Gmail strip data URLs for security reasons. Test thoroughly before using Base64 images in email campaigns.

What is the difference between the data URL and the Base64 string?

A data URL is the complete string including the MIME type prefix (data:image/png;base64,...). The Base64 string is only the encoded portion after the comma. Use the full data URL in HTML/CSS; use just the Base64 string for APIs or databases.

Image to Base64 | Free Edu & .COM Temporary Mails

← جميع الأدوات / Image to Base64

🔤 صورة لتحويل Base64

قم بتحويل أي صورة إلى عنوان URL لبيانات Base64. مفيد لتضمين الصور مباشرة في HTML أو CSS.

🖼️

أسقط الصورة هنا أو انقر للتصفح

ما هو تحويل الصورة إلى Base64؟

يقوم تحويل الصورة إلى Base64 بتشفير ملف الصورة إلى سلسلة نصية Base64 - على وجه التحديد عنوان URL للبيانات مثل data:image/png;base64,iVBOR.... يتيح لك ذلك تضمين الصورة مباشرةً في HTML أو CSS أو JSON دون الحاجة إلى ملف صورة منفصل أو طلب HTTP. يقوم المتصفح بفك تشفير سلسلة Base64 بسرعة ويعرض الصورة بشكل طبيعي.

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

كيفية استخدام الصورة إلى Base64

قم بإسقاط صورتك في منطقة التحميل أو انقر فوق اختر الصورة.
يظهر عنوان URL الكامل لبيانات Base64 في مربع الإخراج على الفور.
انقر انسخ عنوان URL للبيانات الكاملة لنسخ data:image/png;base64,... للاستخدام في HTML أو CSS.
انقر نسخ Base64 فقط لنسخ السلسلة المشفرة فقط (بدون بادئة عنوان URL للبيانات) لاستخدامها في واجهات برمجة التطبيقات أو قواعد البيانات.

لماذا نستخدم صورتنا لأداة Base64؟

مجاني 100% - لا حدود لحجم الملف أو التحويلات.
لا يوجد تسجيل - تحويل فوري بدون حساب.
القائم على المتصفح - تتم قراءة صورتك محليًا باستخدام FileReader API - ولا يتم إرسالها مطلقًا إلى الخادم.
خياران للنسخ - انسخ عنوان URL للبيانات الكاملة أو سلسلة Base64 الأولية فقط بشكل منفصل.
معلومات الحجم - يعرض حجم الملف الأصلي وطول سلسلة Base64 لمساعدتك في تحديد ما إذا كان التضمين منطقيًا أم لا.

الأسئلة المتداولة

انسخ عنوان URL للبيانات الكاملة واستخدمه كسمة src لعلامة img: <img src="data:image/png;base64,iVBOR..." alt="My image">. يمكنك أيضًا استخدامه في CSS: background-image: url('data:image/png;base64,...');. سيعرضها المتصفح تمامًا مثل الصورة المرتبطة خارجيًا.

يؤدي ترميز Base64 إلى زيادة حجم الملف بنسبة 33% تقريبًا. وذلك لأنه يقوم بتشفير 3 بايت من البيانات الثنائية على شكل 4 أحرف ASCII. تصبح الصورة بحجم 100 كيلو بايت تقريبًا 133 كيلو بايت في Base64. هذا الحمل هو سبب التوصية بتضمين Base64 فقط للصور الصغيرة (عادةً ما يكون حجمها أقل من 5 إلى 10 كيلوبايت).

نعم - تعد الصور المشفرة بـ Base64 في HTML للبريد الإلكتروني مفيدة لأنها لا تعتمد على استضافة خارجية ويتم عرضها حتى عندما تكون الصور محظورة افتراضيًا. ومع ذلك، يقوم بعض عملاء البريد الإلكتروني (خاصة Gmail) بإزالة عناوين URL للبيانات من رسائل البريد الإلكتروني بتنسيق HTML لأسباب أمنية. اختبر جيدًا قبل استخدام صور Base64 في حملات البريد الإلكتروني.

عنوان URL للبيانات هو السلسلة الكاملة بما في ذلك بادئة نوع MIME: data:image/png;base64,XXXX. سلسلة Base64 هي الجزء XXXX فقط بعد الفاصلة. استخدم عنوان URL الكامل للبيانات في HTML/CSS؛ استخدم سلسلة Base64 فقط عند إرسال الصور عبر واجهة برمجة التطبيقات (API)، أو تخزينها في قاعدة بيانات، أو عندما يضيف نظام الاستقبال البادئة الخاصة به.

حقائق سريعة

✓ مجاني 100%، بدون رسوم مخفية
✓ لا حاجة إلى حساب أو تسجيل الدخول
✓ يعمل في أي متصفح
✓ بياناتك لا تترك جهازك أبدًا
✓ انسخ عنوان URL للبيانات الكاملة أو Base64 الخام بشكل منفصل

🔤 صورة لتحويل Base64

ما هو تحويل الصورة إلى Base64؟

كيفية استخدام الصورة إلى Base64

لماذا نستخدم صورتنا لأداة Base64؟

الأسئلة المتداولة

كيف يمكنني استخدام إخراج Base64 في HTML؟

لماذا تعد سلسلة Base64 أطول من الصورة الأصلية؟

هل يمكنني استخدام صور Base64 في قوالب البريد الإلكتروني؟

ما الفرق بين عنوان URL للبيانات وسلسلة Base64؟

حقائق سريعة

الأدوات ذات الصلة