صورة إلى Base64: data URI وHTML وCSS
حوّل صورة إلى نص Base64 أو data URI، مع مخرجات جاهزة للصق: وسم HTML img وخلفية CSS وJSON. يعمل في متصفحك.
جارٍ تحميل محوّل الصور إلى Base64…
ملفاتك لا تغادر جهازك أبدًا
طريقة استخدام محوّل الصور إلى Base64
- 1
افتح محوّل الصور إلى Base64 في هذه الصفحة. تُحمَّل مباشرة في متصفحك.
- 2
أضف ملفك أو نصك أو القيم، واضبط الإعدادات.
- 3
انسخ النتيجة أو نزّلها. لا يُرفع أي شيء ولا يُخزَّن.
كيف تحوّل صورة إلى Base64
يحوّل Base64 البيانات الثنائية للصورة إلى نص عادي مكوّن من حروف وأرقام وبعض الرموز. يمكن تضمين هذا النص مباشرة حيث لا يُسمح إلا بالنص: داخل HTML أو CSS كـ data URI، أو في حمولة JSON تُرسل إلى واجهة برمجية، أو في قالب بريد إلكتروني، أو في ملف إعدادات. ويفك المتصفح ترميزه إلى الصورة الأصلية عند عرضها.
يقرأ المحوّل صورتك في المتصفح وينتج النص المرمّز فورًا مع مقتطفات جاهزة: data URI كامل (data:image/png;base64,…)، ونص Base64 فقط، ووسم HTML img، وقاعدة CSS background-image، وكائن JSON. يمكنك نسخ أي منها إلى الحافظة أو تنزيل المخرجات كملف نصي أو JSON. تُقبل الصور حتى 10 ميغابايت.
طريقة استخدام محوّل الصور إلى Base64
- ارفع صورة أو اسحبها وأفلتها (JPG وPNG وWebP وGIF وSVG وغيرها من الصيغ التي يدعمها المتصفح، حتى 10 ميغابايت). تُعرض صيغة الأصل وأبعاده وحجمه.
- اختر صيغة الإخراج: Data URI أو Base64 Only أو CSS Background أو HTML Image أو JSON.
- انسخ النتيجة بنقرة واحدة أو نزّلها، ثم الصقها في HTML أو CSS أو JavaScript أو طلب الواجهة البرمجية.
- تحقق من عدد الأحرف والحجم المرمّز في لوحة الإحصاءات قبل استخدام الصور الكبيرة جدًا.
متى تكون صور Base64 منطقية
- الأيقونات والشعارات الصغيرة في CSS أو HTML، لتوفير طلب HTTP منفصل.
- قوالب البريد الإلكتروني بصيغة HTML حيث قد تُحجب الصور الخارجية.
- الواجهات البرمجية وJSON التي لا تقبل الصور إلا كحقول نصية.
- العروض التجريبية والنماذج الأولية في ملف واحد التي يجب أن تعمل دون موارد خارجية.
أمثلة على المخرجات
يبدو data URI هكذا data:image/png;base64,iVBORw0KGgo… ويمكن استخدامه في أي مكان يُتوقع فيه رابط. وفي HTML يصبح <img src="data:image/png;base64,…" alt="">، وفي CSS background-image: url(data:image/png;base64,…). ويغلّف إخراج JSON النص مع نوع MIME والأبعاد، وهو مناسب لحمولات الواجهات البرمجية وبيانات الاختبار.
الحجم والأداء
لأن Base64 أكبر بنحو 33% من الملف الثنائي ويُحلَّل مع HTML أو CSS الذي يحتويه، فإن التضمين مجدٍ أساسًا للصور الأصغر من بضعة كيلوبايتات، مثل الأيقونات والشعارات الصغيرة والعناصر النائبة. اضغط الصورة أو صغّرها أولًا، ويُفضل إلى حجم العرض الدقيق، ليبقى النص قصيرًا وتبقى صفحاتك سريعة.
يجعل Base64 البيانات أكبر بنحو الثلث من الملف الأصلي، ولا يستطيع المتصفح تخزين الصور المضمّنة مؤقتًا بشكل منفصل. استخدمه للصور الصغيرة؛ أما الصور الفوتوغرافية والرسومات الكبيرة فملف الصورة العادي المضغوط بـ ضاغط الصور أسرع.
خاص ومجاني وسريع
تعمل الأداة بالكامل في متصفحك: تُعالَج ملفاتك ونصوصك على جهازك ولا تُرفع إلى أي خادم. بلا تسجيل ولا علامة مائية ولا حد يومي.
المزايا
- إخراج data URI وBase64 خام
- مقتطفات جاهزة لوسم HTML img وخلفية CSS
- إخراج JSON للواجهات البرمجية
- نسخ إلى الحافظة أو تنزيل
- عرض عدد الأحرف والحجم المرمّز
- صور حتى 10 ميغابايت تُعالج في متصفحك
الأسئلة الشائعة
ما صورة Base64؟
صورة رُمّزت بياناتها الثنائية كنص. وكـ data URI يمكن وضعها مباشرة في HTML أو CSS بدلًا من الربط بملف منفصل.
هل يجعل Base64 الصور أكبر؟
نعم، بنحو 33%، لأن كل 3 بايتات تصبح 4 أحرف. وهو الأنسب للصور الصغيرة.
كيف أستخدم صورة Base64 في HTML؟
اختر إخراج HTML Image والصق وسم img المُنشأ، أو ضع data URI في سمة src لأي عنصر img.
كيف أستخدمها في CSS؟
اختر إخراج CSS Background؛ فيُنشئ قاعدة background-image مع data URI يمكنك لصقها في ورقة الأنماط.
كيف أحوّل Base64 إلى صورة مرة أخرى؟
الصق data URI في شريط عنوان المتصفح لعرض الصورة، أو فك ترميز نص Base64 بأي أداة فك ترميز واحفظ البايتات بالامتداد الصحيح.
هل تُرفع ملفاتي إلى خادم؟
لا. تتم المعالجة محليًا في متصفحك ولا يُرسل أي شيء إلى خادم. وتُحذف بياناتك عند إغلاق علامة التبويب.