حوّل صورك إلى سلاسل Base64 مباشرة من المتصفح، واستخدم البيانات الناتجة في HTML وCSS وتطبيقات الويب التي تحتاج إلى تمثيل الصور كنص.
JPG, PNG, WebP, GIF, SVG — حوّل الصورة إلى نص Base64 للاستخدام في الكود
اسحب الصورة إلى هنا أو استخدم زر الرفع.
هل تحتاج إلى تضمين صورة صغيرة داخل صفحة ويب أو تطبيق دون الاعتماد على ملف صورة منفصل؟ تتيح لك أداة تحويل الصورة إلى Base64 من Imagesmint تحويل بيانات الصورة إلى سلسلة نصية يمكنك استخدامها في HTML أو CSS أو في أجزاء أخرى من الكود. ارفع الصورة، واختر صيغة الإخراج المناسبة، ثم انسخ النتيجة دون الحاجة إلى ترميزها يدويًا.
توفر الأداة أربع صيغ للإخراج: Data URL وBase64 الخام وCSS وHTML. ولكل صيغة استخدام مختلف، لذلك يمكنك اختيار النتيجة المناسبة لمشروعك بدل تعديل النص الناتج بنفسك.
تُخزَّن بيانات الصور عادةً بصيغة ثنائية لا تُعرض كنص عادي. أما Base64 فيمثّل هذه البيانات باستخدام أحرف نصية، مما يسهل تضمينها في بعض المواضع التي يكون فيها التعامل مع النص أكثر ملاءمة.
تجمع صيغة Data URL بين نوع الملف ومؤشر Base64 والبيانات المشفّرة. فعلى سبيل المثال، يبدأ رابط الصورة بصيغة PNG بالنص data:image/png;base64, ثم تأتي بيانات الصورة المرمّزة. ويمكن استخدام السلسلة الكاملة كمصدر لصورة داخل HTML أو ضمن خاصية الخلفية في CSS.
من المهم معرفة أن الترميز إلى Base64 لا يعني ضغط الصورة أو تغيير صيغتها. فإذا كانت الصورة الأصلية JPG، فستظل بياناتها بيانات JPG بعد الترميز؛ ولن تتحول تلقائيًا إلى PNG أو WebP. إذا كنت تريد تغيير صيغة الملف فعلًا، فاستخدم أداة تحويل صيغ الصور.
اختر Data URL عندما تحتاج إلى المرجع الكامل للصورة، بما في ذلك نوع الملف وبيانات Base64. وهي غالبًا الخيار الأسهل عند تضمين صورة مباشرة داخل HTML.
<img src="data:image/png;base64,..." alt="وصف الصورة">علامات الحذف في المثال مجرد عنصر نائب وليست بيانات صورة صالحة. استبدلها بسلسلة Data URL كاملة التي تولّدها الأداة. وقد تكون هذه السلسلة طويلة جدًا، خصوصًا عند التعامل مع صور كبيرة أو كثيرة التفاصيل.
تعرض صيغة Raw النص المرمّز فقط دون مقدمة Data URL. وهي مناسبة عندما يتطلب سكربت أو API أو حقل إعدادات أو تطبيق آخر سلسلة Base64 مباشرة، وليس رابطًا كاملًا للصورة.
انتبه إلى أن Base64 الخام لا يصلح عادةً لوضعه وحده داخل الخاصية src في عنصر الصورة HTML. فعرض الصورة يتطلب غالبًا إضافة بادئة Data URL المناسبة إلى النص.
تنشئ الأداة كود CSS يتضمن الصورة داخل خاصية background-image. وقد يفيد ذلك عند استخدام أيقونات صغيرة أو رسومات للواجهة أو صور زخرفية تريد تضمينها مباشرة في ورقة الأنماط.
.image {
background-image: url("data:image/png;base64,...");
background-size: cover;
background-position: center;
}يوضح المثال شكل الكود الذي تولّده الأداة. تستخدم الخاصية background-size: cover مساحة العنصر لتغطية الحاوية، وقد يؤدي ذلك إلى اقتطاع جزء من الصورة إذا اختلفت أبعاد الحاوية عن أبعاد الصورة. يمكنك تعديل CSS بما يناسب تصميم موقعك.
تجهّز صيغة HTML عنصر صورة يحتوي على Data URL داخل الخاصية src. وهذا مفيد كنقطة بداية لصفحة HTML أو نموذج أولي أو عنصر صغير في مشروع ويب. بعد النسخ، راجع النص الموجود في الخاصية alt واستبدل اسم الملف بوصف واضح للصورة عند الحاجة، حتى يكون الكود أنسب لإمكانية الوصول.
تعرض واجهة الأداة صيغ JPG وPNG وWebP وGIF وSVG ضمن الصيغ الشائعة. ويسمح محدد الملفات باختيار ملفات الصور، لكن إمكانية عرض المعاينة والتعامل الصحيح مع بعض الملفات قد تختلف بحسب المتصفح ونوع MIME الذي يحمله الملف.
تقوم الأداة بترميز الملف الذي تختاره، وليست محرر صور. فلا توجد فيها خيارات لقص الصورة أو تغيير أبعادها أو ضغطها قبل إنشاء Base64. إذا أردت تقليل الحجم الفعلي للصورة أولًا، فاستخدم أداة ضغط الصور.
يكون Base64 مناسبًا خصوصًا للملفات الصغيرة التي ترتبط مباشرة بالكود. ومن الاستخدامات الشائعة:
لكن Base64 ليس الخيار الأفضل لكل الصور. فالنص الناتج يزيد عادةً بنحو الثلث مقارنة بالبيانات الثنائية الأصلية. وقد يؤدي تضمين صور فوتوغرافية كبيرة إلى زيادة حجم ملفات HTML أو CSS أو الموارد النصية الأخرى، مما يصعّب صيانتها وقد يبطئ تنزيلها. لذلك يكون الاحتفاظ بالصور الكبيرة كملفات مستقلة أكثر عملية في معظم الحالات.
في تنفيذ الأداة الذي يعرضه الكود المرسل، تتم قراءة الملف داخل المتصفح باستخدام واجهة JavaScript المسماة FileReader. ولا يرسل كود التحويل المعروض محتوى الصورة إلى خادم. وبذلك يمكن إنشاء سلسلة Base64 دون الحاجة إلى خطوة رفع منفصلة لإجراء التحويل.
لا. Base64 طريقة ترميز وليست طريقة ضغط. وعادةً ما تزيد كمية البيانات بنحو 33%، مع اختلاف النسبة قليلًا بحسب المحتوى وبادئة Data URL.
لا يؤدي ترميز Base64 بحد ذاته إلى خفض الجودة. فالأداة تقرأ الملف المحدد وتُرمّز بياناته، بدل إعادة حفظه كصورة جديدة بصيغة JPG أو PNG أو WebP.
تتضمن Data URL نوع الملف وبادئة Base64 قبل البيانات المرمّزة، بينما يحتوي Base64 الخام على النص المرمّز وحده. اختر الصيغة التي يتطلبها الكود أو التطبيق الذي تعمل عليه.
نعم. اختر HTML للحصول على عنصر صورة جاهز كبداية، أو اختر Data URL إذا أردت إدراج القيمة الكاملة داخل كودك الخاص. أما إذا كنت تحتاج إلى خلفية CSS، فاختر صيغة CSS.
يمكن فعل ذلك، لكنه غالبًا غير ضروري. فسلاسل Base64 الكبيرة تجعل ملفات المصدر وأوراق الأنماط أكبر. في حالة الصور الكبيرة، يُفضّل عادةً الاحتفاظ بها في ملفات منفصلة ما لم يكن لديك سبب تقني واضح لتضمينها.
نعم. إذا كانت لديك سلسلة Base64 وتريد استخراج الصورة منها، فاستخدم أداة تحويل Base64 إلى صورة.
تسهّل أداة Image to Base64 من Imagesmint تجهيز بيانات الصور للمشاريع البرمجية. اختر صيغة الإخراج التي تناسبك، وانسخ النتيجة، واستخدم Base64 عندما يمنحك تضمين الصورة الصغيرة فائدة حقيقية في مشروعك.