Base64
Image Data URL
⚠️ Large image may freez the browser
ترميز صور PNG إلى Base64 لاستخدامها في CSS
حوّل صور PNG إلى صيغ Base64 أو DataURL. تضمينها مباشرةً في CSS أو JavaScript دون الحاجة إلى ملفات خارجية. قد تؤثر الملفات الأكبر على الأداء؛ يُفضل الأحجام الأصغر. الترميز Base64 يبسّط التكامل مع أصول الويب، ويقلل الاعتماد على الموارد الخارجية. تنسيق DataURL يبسّط هيكل التعليمات البرمجية لتسليم المحتوى الديناميكي.
Image → Base64 / Data URL
Click or Drag & Drop an Image
حوّل الصور إلى كود Base64
1
حمّل صورة PNG
ارفع صورة PNG الخاصة بك بالنقر أو السحب إلى منطقة الرفع.
2
اختر ترميز التنسيق
اختر علامة التبويب 'Base64' أو 'DataURL' لتحديد تنسيق الترميز المطلوب.
3
عرض بيانات Base64
سيظهر التمثيل الخاص بـ Base64 أو DataURL لصورتك في منطقة النص أسفل علامات التبويب.
4
نسخ نص مشفر
انقر على زر "نسخ" لنسخ النص المشفر إلى الحافظة لاستخدامه في CSS أو JavaScript.
تضمين صور PNG مباشرةً في CSS
يمكن تضمين صورة صغيرة مباشرةً في ملف CSS الخاص بك دون إدارة ملفات منفصلة عن طريق تحويل صور PNG إلى صيغ Base64 أو DataURL. تعمل أداة تحويل PNG إلى Base64 لـ CSS على تبسيط سير عمل تطوير الويب وتقليل طلبات HTTP. وهذا يؤدي إلى كود أنظف وأكثر كفاءة وأوقات تحميل صفحات أسرع.
تقليل حجم الملفات وطلبات HTTP
يقلل هذا الأداة من عدد الملفات التي يحتاج موقعك لتحميلها عن طريق تحويل صور PNG إلى صيغ Base64 أو DataURL. يؤدي تضمين الصور مباشرةً في ملفات CSS أو JavaScript الخاصة بك إلى تقليل طلبات HTTP، مما قد يعزز سرعة تحميل الصفحة. يساهم هذا النهج في تحسين أداء الموقع عن طريق تقليل الاعتماديات على الملفات الخارجية.
الأسئلة المتكررة
ما هو عنوان URL للبيانات Base64 ولماذا أستخدمه؟
يمثل عنوان URL للبيانات Base64 طريقة لتمثيل صورة كسلسلة من الأحرف. يسمح لك بتضمين الصور مباشرة في كود CSS أو JavaScript الخاص بك، وتجنب الحاجة إلى تحميلها من ملفات خارجية. يمكن أن يكون هذا مفيدًا للرموز الصغيرة أو الصور.
كيف يمكنني استخدام الـ Base64 أو DataURL الذي تم إنشاؤه؟
ما عليك سوى نسخ الكود المقدم بعد تحويل صورتك ولصقه في ملف CSS أو JavaScript. على سبيل المثال، في CSS، يمكنك استخدامه بهذه الطريقة: background-image: url('data:image/png;base64,...');
ما هي صيغ الصور المدعومة من هذه الأداة؟
هذه الأداة مصممة خصيصاً لصور PNG. قد لا تنجح عملية التحويل مع التنسيقات الأخرى.
لماذا لا يوصى بالصور الكبيرة؟
تؤدي الصور الكبيرة إلى إنشاء سلاسل Base64 طويلة جدًا، مما قد يبطئ جهاز الكمبيوتر الخاص بك ويزيد من أوقات تحميل الصفحة. من الأفضل استخدام هذه الأداة للصور الأصغر.
هل يوجد حد لحجم الصورة التي يمكنني تحميلها؟
في حين لا توجد حدود صارمة لحجم الملف، فإن الأداء سينخفض مع الصور الأكبر. نوصي باستخدام ملفات PNG أصغر للحصول على أفضل النتائج.