تحويل الصور إلى Base64

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

تحويل الصور إلى Base64 يحول ملفات صورك إلى سلاسل نصية مشفرة بـ Base64، مما يتيح لك تضمين بيانات الصور مباشرة في HTML أو CSS أو JavaScript بدون طلبات HTTP إضافية. النتيجة هي Data URI — سلسلة نصية تبدو مثل data:image/png;base64,iVBOR....

كيف يعمل

تتم قراءة الصور المرفوعة وإعادة رسمها مباشرة في متصفحك باستخدام Canvas API. استخدم شريط الجودة (لـ JPEG/WEBP) للتحكم في نسبة الضغط، وشريط الحجم لتغيير حجم المخرجات، أو اختر تنسيقاً مختلفاً. كل شيء يبقى في متصفحك — لا يتم إرسال أي بيانات صور إلى أي خادم.

4 تنسيقات للمخرجات

• Base64 خالص — سلسلة Base64 الخام بدون بادئة Data URI
• Data URI — التنسيق الكامل data:image/...;base64,...
• علامة HTML <img> — ترميز <img src="..."> جاهز للاستخدام
• CSS background — تعريف background-image: url(...) جاهز للاستخدام

حالات الاستخدام

• تضمين أيقونات أو شعارات صغيرة في رسائل HTML الإلكترونية لمنع حظر الصور الخارجية
• تضمين الصور الصغيرة مثل الأيقونات أو خلفيات الأزرار مباشرة في CSS لتقليل طلبات HTTP
• استخدام الصور في بيئات اختبار الكود مثل CodePen أو JSFiddle بدون استضافتها بشكل منفصل
• إرسال بيانات صور صغيرة عبر واجهات JSON API
• تضمين لقطات الشاشة في Markdown باستخدام Base64 — مفيد عندما لا تكون الصور الخارجية مدعومة

أمثلة

علامة HTML <img>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="embedded image">

CSS background-image

.element {
  background-image: url('data:image/png;base64,iVBORw0KGgoAA...');
  background-size: cover;
}