بدون رفع, 100% محلي، بدون حساب

محوّل الصورة → Base64

شفّر أي صورة إلى URI بيانات Base64، أو الصق URI بيانات لفك تشفيرها إلى صورة. انسخ النتيجة أو خذ مقتطف CSS url(). لا شيء يغادر جهازك.

كيف تعمل صورة إلى Base64

أداة تحويل الصور إلى Base64 تقرأ ملف صورتك وتُشفّره كـ URI بيانات Base64 يمكنك تضمينه مباشرةً في HTML أو CSS أو JSON دون الحاجة إلى طلب ملف منفصل. يستخدم التحويل FileReader API في متصفحك؛ لا تُرسَل أي بايتات من صورتك إلى خادم. يمكنك أيضًا لصق سلسلة Base64 للتفكيك ومعاينة الصورة، كل ذلك محليًا.

رابط بيانات Base64 أكبر بنحو 33% من الأصل الثنائي لأن كل مجموعة ثلاث بايتات تتوسع إلى أربعة أحرف ASCII. هذه الزيادة في الحجم هي المقايضة المتوقعة مقابل ملاءمة تضمين صورة في مستند أو ورقة أنماط. تعرض الأداة سلسلة Base64 الخام وقصاصة تهيئ وسم img جاهزةً للاستخدام في HTML وقصاصة background-image لـ CSS للنسخ السريع في مشروعك.

كتبه Bastien Sulyan

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

  1. أسقط ملف صورة في منطقة الرفع أو انقر للاستعراض. الصيغ المقبولة: JPEG وPNG وWebP وGIF وSVG.
  2. يظهر رابط بيانات Base64 فورًا في حقل الإخراج.
  3. انسخ سلسلة Base64 الخام، أو استخدم قصاصة وسم img المُهيَّأة مسبقًا في HTML أو قصاصة background-image لـ CSS.
  4. للتفكيك، الصق سلسلة Base64 في حقل الإدخال وانتقل إلى وضع التفكيك لمعاينة الصورة.
  5. انقر على زر النسخ بجانب أي قصاصة لنسخها إلى الحافظة.

حالات الاستخدام الشائعة

  • مطور واجهة أمامية يُضمِّن أيقونةً صغيرة كـ URI بيانات في ملف CSS للتخلص من طلب HTTP إضافي.
  • مطور يُضمِّن محرك تحميل صغيرًا كسمة src بصيغة Base64 حتى تكون الصورة النائبة متاحةً قبل تحميل حزمة JavaScript.
  • مهندس ضمان جودة ينسخ Base64 لصورة اختبارية ليلصقها مباشرةً في حمولة JSON لاختبار API.
  • منشئ قوالب بريد إلكتروني يُضمِّن شعار توقيع كـ URI بيانات Base64 لأن بعض عملاء البريد يحظرون طلبات الصور الخارجية.

الأسئلة الشائعة

لماذا يكون إخراج Base64 أكبر بنحو الثلث من ملفي الأصلي؟

يُمثّل ترميز Base64 كل ثلاث بايتات ثنائية كأربعة أحرف ASCII بنسبة 4/3. صورة حجمها 100 كيلوبايت ثنائيًا تصبح ما يقرب من 133 كيلوبايت كسلسلة Base64. هذا متأصل في نظام الترميز وليس قصورًا في الأداة.

هل يُرسَل محتوى الصورة إلى خادم أثناء الترميز؟

لا. تقرأ FileReader API الملف الثنائي من قرصك المحلي وتمرر النتيجة مباشرةً إلى وظيفة الترميز في JavaScript داخل تبويب متصفحك. لا تغادر بيانات الصورة جهازك.

هل يمكنني استخدام إخراج رابط البيانات في أي سياق HTML أو CSS؟

نعم. رابط بيانات يبدأ بـ data:image/jpeg;base64, متبوعًا بالسلسلة المشفَّرة يمكن استخدامه كسمة src لوسم img أو كقيمة url() في خاصية CSS background-image. جميع المتصفحات الحديثة تدعم روابط البيانات. روابط البيانات الكبيرة جدًا يمكن أن تُبطئ عرض الصفحة، لذا يُحجز التضمين عادةً للصور الصغيرة التي تقل عن بضعة كيلوبايتات.

هل تدعم الأداة ملفات GIF المتحركة؟

تُشفّر الأداة المحتوى الثنائي الكامل لأي ملف تقدمه، بما في ذلك ملفات GIF المتحركة. رابط البيانات الناتج عند استخدامه كـ src لوسم img سيشغّل الحركة في المتصفحات التي تدعم ملفات GIF المتحركة.

كيف أفكك سلسلة Base64 وأعود إلى الصورة؟

انتقل إلى وضع التفكيك في الأداة والصق سلسلة Base64 مع أو بدون البادئة data: وستُفكك الأداة الصورة وتعرضها للتنزيل كصورة ثنائية مع إظهار معاينة.

أدوات ذات صلة

أبقِ كل شيء محليًا, استكشف الأدوات التكميلية.

جميع أدوات الصور