محوّل الصور إلى Base64

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

يحوّل Base64 بايتات ملف الصورة إلى نص عادي مكوّن من 64 حرفًا. فكل 3 بايتات تصبح 4 أحرف، لذا يكون النص أكبر من الملف بنحو 33%. ويضيف data URI بادئة قصيرة تتضمن نوع MIME، مثل data:image/png;base64,، ما يتيح للمتصفح عرض النص في أي مكان يتوقع فيه عنوان URL لصورة.

تُقرأ الصورة وتُرمَّز محليًا في متصفحك. فهي لا تُرفع إلى أي خادم، لذا تبقى لقطات الشاشة الخاصة والتصاميم غير المنشورة على جهازك.

ما المخرجات التي تنسخها؟

• Data URI لسمات src وشيفرة JavaScript وحقول JSON التي تتوقع عنوان URL.
• Base64 الخام لواجهات API التي لا تريد إلا البايتات المرمّزة، وعادةً ما يرافقها حقل منفصل لنوع MIME أو اسم الملف.
• وسم img في HTML للصقه مباشرة في صفحة أو قالب.
• CSS background-image للأيقونات والعناصر الزخرفية في ورقة الأنماط.
• Markdown للتوثيق والملاحظات. علمًا أن بعض أدوات العرض، ومنها GitHub، لا تعرض صور data URI.

الصيغ المدعومة في لمحة

تكشف الأحرف الأولى من سلسلة Base64 نوع الملف، لأنها ترمّز توقيع الصيغة.

متى يكون تضمين الصورة مجديًا

توفّر عناوين data URI طلبًا عبر الشبكة وتجعل الملف مكتفيًا بذاته. وهذا يناسب الأيقونات والشعارات الصغيرة التي لا يتجاوز حجمها بضعة كيلوبايتات، وتقارير HTML المكوّنة من ملف واحد، والعناصر النائبة الصغيرة المموّهة، والصور المرسلة داخل JSON. لكنها خيار سيئ للصور الفوتوغرافية الكبيرة: فالثلث الإضافي في الحجم، وغياب التخزين المؤقت المستقل في المتصفح، وثقل ملف HTML أو CSS الذي يجب تنزيله قبل عرض أي شيء، كلها تكلّف عادةً أكثر من الطلب الذي توفّره. وإذا كان موقعك يرسل ترويسة Content-Security-Policy، فيجب أيضًا إضافة data: إلى img-src كي تعمل الصور المضمّنة.