محول الصور إلى Base64
حوّل أي صورة إلى رابط بيانات Base64 لتضمينها مباشرة في HTML أو CSS.
أفلت صورة هنا أو اضغط للتصفح
يدعم JPG و PNG و WEBP و GIF و SVG
كل التحويل يحدث في متصفحك. صورتك لا تُرفع أبداً.
تحويل صورة لرابط بيانات Base64 يتيح لك تضمينها مباشرةً داخل HTML أو CSS كنص، بلا ملف منفصل وبلا طلب شبكة إضافي. لأيقونة صغيرة، قد يُسرّع ذلك صفحة فعلًا — رحلة أقل للخادم. لكنها تقنية بمنحنى مقايضة حاد: بعد بضعة كيلوبايتات، تضمين صورة يجعل صفحتك أبطأ وأثقل، لا أسرع. فهم أين يجلس ذلك الخط هو ما يفصل استخدام روابط البيانات جيدًا عن تضخيم موقعك. تحوّل هذه الأداة أي صورة لرابط بيانات كليًا في متصفحك.
كيف تعمل الأداة
اختر صورة وترمّزها الأداة لرابط بيانات Base64 — سلسلة نص طويلة تبدأ بـdata:image/ تحتوي الصورة كاملة مضمّنة. تستطيع نسخها ولصقها مباشرةً في src وسم img، أو background-image لـCSS، أو أينما يُتوقّع رابط. الترميز يحدث في متصفحك، فلا تُرفع الصورة أبدًا، والمخرج يعمل فورًا في أي متصفح حديث دون خطوة استضافة.
صيغة رابط البيانات وكلفتها
data:image/png;base64,iVBORw0KGgoAAAANS...
↑ نوع MIME ↑ ترميز ↑ بيانات الصورة
كلفة الحجم: Base64 أكبر ~33% من الملف
صورة 10 KB → ~13 KB من النص
قاعدة تقريبية:
تحت ~2 KB → التضمين عادةً يساعد
فوق ~5-10 KB → اربط الملف بدلًازيادة الحجم 33% هي المشكلة التي تجعل روابط البيانات أداة صور صغيرة. Base64 يرمّز ثلاث بايتات لأربعة أحرف نص، فكل صورة مضمّنة أكبر بثلث من الملف الأصلي، وخلافًا لملف مربوط، ذلك النص المضمّن لا يمكن تخزينه مؤقتًا منفصلًا — يُعاد تنزيله مع HTML أو CSS في كل تحميل صفحة. صورة بطل 200 KB مضمّنة كرابط بيانات تصير 266 KB من النص تُشحن في كل مشاهدة صفحة، ولهذا التقنية تؤتي ثمارها فقط للأصول الصغيرة كثيرة الاستخدام.
ما يجب معرفته عن روابط البيانات
- 1روابط البيانات تتألق فقط للصور الصغيرة جدًا. تحت نحو 2 KB — أيقونات ضئيلة، أنماط بسيطة، شعار صغير — التضمين يوفّر طلب HTTP وقد يُسرّع أول عرض بشكل قابل للقياس. فوق ذلك، عقوبة الحجم 33% وفقدان التخزين المؤقت يفوقان الطلب الموفَّر، وملف مربوط أسرع. نقطة التعادل صغيرة؛ احترمها.
- 2الصور المضمّنة لا يمكن تخزينها مؤقتًا باستقلال، وهي الكلفة الخفية. ملف صورة مربوط يُنزَّل مرة ويُعاد استخدامه عبر كل صفحة؛ ورابط بيانات يُعاد تحليله وتنزيله مع مستنده المُضيف كل مرة. لصورة مُستخدَمة على صفحات كثيرة، التضمين يضاعف وزنها عبرها كلها بدل تخزينها مؤقتًا مرة.
- 3تضمين رابط بيانات في CSS قد يُلغي طلبًا حاجبًا للعرض. نمط خلفية صغير أو أيقونة مضمّنة في ورقة أنماطك تُحمَّل مع CSS بدل تشغيل جلب منفصل قد يؤخّر العرض. هذه إحدى الحالات القليلة التي يساعد فيها رابط بيانات الأداء بوضوح — صغير، حرج، في CSS.
- 4Base64 ترميز لا ضغط — اضغط أولًا. رابط بيانات صورة غير مضغوطة ضخم بلا داعٍ. حسّن واضغط الصورة لأصغر حجم معقول قبل التحويل دائمًا، لأن Base64 يضيف حينها 33% فوق ملف صغير أصلًا لا فوق متضخّم.
- 5روابط البيانات تُضخّم HTML وتضرّ المقروئية والتحرير. صفحة مُرصّعة بسلاسل مضمّنة بطول كيلوبايتات صعبة القراءة والمقارنة والصيانة، وتُضخّم ملف HTML الذي يجب تنزيله قبل عرض أي شيء. احفظ التضمين لبضعة أصول ضئيلة حقًا حرجة الأداء، لا كنهج عام للصور.
الأسئلة الشائعة
متى أستخدم رابط بيانات Base64 لصورة؟
للصور الصغيرة جدًا — نحو تحت 2 KB — حيث يفوق توفير طلب HTTP السلبيات. الأيقونات الضئيلة وأنماط الخلفية الصغيرة والرسوم المضمّنة البسيطة مرشّحون جيدون، خصوصًا مضمّنة في CSS حيث تتجنّب جلبًا منفصلًا حاجبًا للعرض. فوق بضعة كيلوبايتات، زيادة الحجم 33% وفقدان التخزين المؤقت يجعلان ملفًا مربوطًا أسرع. روابط البيانات أداة دقة للأصول الصغيرة، لا استراتيجية صور عامة.
لماذا تضمين صورة يجعل صفحتي أكبر؟
سببان. أولًا، ترميز Base64 أكبر نحو 33% من الملف الأصلي، لأنه يمثّل ثلاث بايتات بأربعة أحرف نص. ثانيًا، خلافًا لملف مربوط يخزّنه المتصفحون ويُعيدون استخدامه، رابط بيانات مضمّن يُنزَّل طازجًا مع HTML أو CSS في كل تحميل صفحة، فصورة مُشترَكة تُعاد تنزيلها عبر كل صفحة بدل تخزينها مؤقتًا مرة. لأي شيء عدا الأصول الضئيلة، هذا يجعل الصفحة أثقل لا أخف.
هل تتأثر جودة الصورة بالتحويل لـBase64؟
لا — Base64 ترميز نص بلا فقدان، لا ضغط، فيُعيد إنتاج بايتات الملف الأصلي بالضبط بلا أي تغيير جودة إطلاقًا. الصورة تبدو متطابقة. ما يغيّره هو الحجم: النص المُرمَّز أكبر نحو ثلث من الملف. إن أردت الصورة أصغر، اضغطها قبل التحويل؛ Base64 ذاته لا يلمس الجودة أبدًا، فقط طريقة تمثيل البيانات.
هل أستطيع استخدام رابط بيانات في CSS كما في HTML؟
نعم، وCSS غالبًا المكان الأفضل له. أيقونة صغيرة أو نمط خلفية مضمّن كرابط بيانات في قاعدة background-image يُحمَّل مع ورقة الأنماط بدل تشغيل جلب منفصل، ما قد يتجنّب طلبًا حاجبًا للعرض. نفس رابط البيانات يعمل في src وسم img HTML أيضًا. مقايضات الحجم والتخزين المؤقت متطابقة في السياقين، فنفس قاعدة «الأصول الصغيرة فقط» تنطبق.
هل تُرفع صورتي حين أحوّلها؟
لا. التحويل يعمل كليًا في متصفحك، فتُرمَّز الصورة محليًا ولا تُرسَل أو تُسجَّل أو تُخزَّن. يمكنك التحقق بقطع الإنترنت — تعمل الأداة لأنه لا يوجد خادم معني. هذا يُبقي الصور الخاصة والشعارات والأصول غير المنشورة على جهازك طوال التحويل.