التعريف بروابط الداتا Data URLs وفيما تستخدم
هناك معلومات كمالية , قد لا تحتاجها بشكل دائم لكن من المهم معرفتها لأنك يوم أن تحتاجها كونك تعرفها مسبقاً ستشعر بالراحة في تجنبك البحث عنها وتضييع الوقت , ومن تلك الأمور هي روابط الداتا Data URLs
ما هي روابط الداتا Data URLs ؟
هي صيغ نصية للملفات تمكنك من جعل ملف معين في هيئة رابط نصي مباشر يمكنك استخدامه أينما تريد وغالباً ما يتم استخدامها في الصور لتحويل الصورة الى رابط نصي لكي تستخدم في صفحات الإنترنت فروابط الداتا عمرها الإفترضي على الإنترنت أطول من عمر الرابط العادي كذلك يكون تحميلها أسرع لأنها تكون مدمجة وليست مرفوعة على موقع خارجي
ما الملفات التي يمكن تحويلها لروابط داتا ؟
يمكنك استخدام أى ملفات نصية حتى ملفات الويب مثل JS , CSS حتى الفيديو يمكن تحويلة لرابط داتا لكنه يكون ثقيل جداً حتى لو الملف ثانية واحدة
متى تستخدم روابط الداتا ؟
أولاً عليك معرفة أن روابط الداتا ليست الإختيار الأمثل دائما فكلما زاد حجم الملف كلما زاد نص الرابط وكلما أصبح يأخذ جزء كبير من صفحة الإنترنت لذلك أفضل وقت تستخدم فيه هذا النوع من الروابط يكون في الملفات الصغيرة جداً أيقونات شئ تحتاج حفظة لفترة طويلة وتحتاج ان يتم تحميله سريعاً في الصفحة وفي نفس الوقت حجمه صغير
كيف تستخدم روابط الداتا ؟
تستخدم مثلما تستخدم أى رابط عادي , تضيفه على رابط يمكنك ان تضيفه على كود صورة أو على كود خلفية في CSS كل ما يمكنك استخدام رابط فيه يمكنك استخدام روابط الداتا فيه
مثال هذه الصورة
لو وضعناها كصورة لكن عبر رابط داتا وليس رابط مرفوع على استضافة ستكون بالشكل التالي
<img src="data:image/png;base64,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" />
لاحظ أن كل النص الغير معلم بالأحمر هذا كله عبارة عن رابط , هذه الصورة أصبحت في هيئة نصية لذلك أصبحت كبيرة لكن بالنسبة للمتصفح قراءتها هكذا أسرع من الذهاب للإستضافة وجلبها لكن كلما كبر الملف كلما كان أصعب التعامل معه داخل صفحة الـ HTML لذلك الأفضل أن تكون خياراتك في عمل روابط الداتا في أضيق الحدود
كيف أحصل على روابط الداتا ؟
هناك مواقع تقوم بتوليد روابط الداتا لو بحثت تحت Data URLs Generator
ستجد العديد منها وهذا أحدها أنا أستخدمه
السلام عليكم
ردحذفبارك الله فيك أستاذ
حفظك الله ورعاك
موضوع قيم وشيق ومفيد جدا
وعليكم السلام ورحمة الله وبركاته
حذفتسلم أخي منير , لا يكتمل الموضوع إلا بمرورك يا غالي ❤️
موصوع قيم كالعادة
ردحذفتسلم أخي أحمد
حذف