تحويل صورة إلى Base64
اسحب صورة واحصل على Data URL جاهز للصقه في HTML أو CSS أو JSON.
طريقة الاستخدام
- اختر الصورة أو اسحبها إلى المربع.
- اختر الصيغة: Data URL وحده، أو وسم img كامل، أو سطر CSS، أو Base64 فقط.
- انسخ الناتج بزر واحد أو نزّله ملفًا نصيًا.
عن الأداة
Base64 يكتب بايتات الصورة بأحرف نصية (A–Z وa–z و0–9 و+ و/) ليمكن وضعها حيث لا يُقبل إلا النص: داخل صفحة HTML، أو ملف CSS، أو JSON في استجابة API، أو قالب بريد. Data URL هو الصيغة الكاملة data:image/png;base64,… التي يفهمها المتصفح في src وurl() مباشرة، فتظهر الصورة دون طلب شبكة إضافي.
الثمن الحجم: كل ثلاثة بايتات تصبح أربعة أحرف، فالنص أكبر من الصورة بنحو 33%، ولا يستطيع المتصفح تخزين الصورة المضمّنة في ذاكرته المؤقتة منفصلة عن الصفحة. لذلك يُستحسن التضمين للأيقونات والشعارات الصغيرة (دون بضع عشرات الكيلوبايتات) التي تظهر في أول الصفحة ويوفّر تضمينها طلبًا؛ أما الصور الكبيرة فملف مستقل أسرع وأرخص، والأداة تنبّهك حين تتجاوز الصورة ميغابايتًا.
نوع الصورة يُكتشف من بايتاتها الأولى لا من امتداد الملف، فملف JPG أُعيدت تسميته إلى png يُعطي image/jpeg الصحيح، وSVG يُعرف من نصه. الصورة تُقرأ في متصفحك ولا تُرسل إلى أي خادم.
أسئلة شائعة
كيف أضع الصورة في HTML أو CSS؟
اختر «وسم img» فتحصل على <img src="data:image/png;base64,…" alt="">، أو «CSS» فتحصل على background-image: url("data:…");. الصقه مكان رابط الصورة العادي.
هل يجب استخدام Base64 لكل الصور؟
لا. يفيد للأيقونات الصغيرة التي تريدها في أول رسم للصفحة أو في قالب بريد لا يحمّل صورًا خارجية. الصور الكبيرة تبقى ملفات لأن المتصفح يخزّنها ويحمّلها بالتوازي، وHTTP/2 جعل كلفة الطلب الإضافي أقل بكثير.
هل يمكن تضمين SVG مباشرة دون Base64؟
نعم، data:image/svg+xml, متبوعًا بنص SVG بعد ترميز الرموز الخاصة (<، >، #) يعطي نصًا أصغر من Base64 وأسهل تعديلًا. Base64 يبقى أبسط حين يحتوي SVG على أحرف كثيرة تحتاج إلى ترميز.