إنس أمر رفع الصور و ربط موقعك بملفات خارجية

بسم الله الرحمان الرحيم و السلام عليكم و رحمة الله تعالى و بركاته .
هل تعلم أن التقليل من معدل طلبات http للخادم يؤذي إلى تحميل صفحات الموقع بسرعة .
لماذا ؟؟؟؟؟
لأن كل طلب جديد لأي ملف خارجي ، مثلا الصورة ، أو ملف CSS ، أو ملف جافا سكربت ، يؤدي إلى إنشاء مورد اتصال من قبل المتصفح، مما يؤدي إلى زيادة وقت التحميل للصفحة بسبب عملية الاتصال الجديدة مع الخادم لطلب هذا الملف. فما هي إذن وسائل التغلب على مشكل تعدد طلبات http ؟ و ما دور Data  URI في توفير البيانات الداخلية ؟

وسائل التغلب على على مشكل تعدد طلبات http للخادم .

هناك الكثير من الوسائل التي تتيح لنا التقليل من حجم هذه الطلبات على الخادم، وبالتالي تؤدي إلى سرعة تحميل الصفحات. من بين هذه الوسائل هي دمج ملفات CSS في ملف واحد، وبطريقة مشابهة يمكن دمج ملفات جافاسكربت في ملف واحد. ويمكننا أيضاً استخدام الصور الضمنية، عبر تحويلها إلى نص مرمّز داخل مستندات HTML وCSS، وهو ما سنركز عليه .

ما هو Data  URI ؟

data  URI هي وسيلة لإدراج البيانات ضمنياً في صفحات الموقع بدلاً من استدعائها خارجياً. البيانات تشمل، على سبيل المثال لا الحصر، الصور، ملفات CSS، ملفات جافاسكربت، وهي من تعريف اللجنة الخاصة بنظام الإنترنت IETF في RFC 2397.

طريقة التنسيق هي كالتالي :

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

هذا النسق العام الذي يجب استخدامه لإدراج البيانات ضمنياً على الصفحة، حيث كل جزئية فيه تعني التالي :

• data، البروتوكول الذي يجب استخدامه ليفهمه المتصفح، وهنا تم استخدام data للتعريف بأنها عبارة عن بيانات.
• mime type، إمتداد ملف الوسائط الذي سيتم إدراجه، على سبيل المثال لإدراج صورة PNG يتم استخدام image/png. إذا لم يتم استخدام أي قيمة هنا، فإن القيمة الافتراضية هي النص text/plain;charset=US-ASCII.
• charset، نوع الترميز المستخدم للنصوص، واستخدامه يكون خاص فقط للنصوص. يمكن تركه فارغاً للملفات الأخرى.
• base64، نوع ترميز البيانات، على عكس charset المستخدم للنصوص، فإن نوع الترميز هنا يعني الترميز الخاص بالبيانات التي سيتم إدراجها. افتراضياً وعند عدم تحديد أي قيمة هنا، يتم استخدام الترميز الخاص بروابط الإنترنت URL encoding، والذي يكون في العادة حروف آسكي ASCII اللاتينية، وأي حروف أخرى خارج أسكي يتم استبدالها بالحروف %xx حيث x يكون عدد ستعشري Hexdecimal. عندما يتم استخدام ترميز Base64، يجب أن تكون البيانات أيضاً مرمّزة بهذا الترميز.
• encoded data، هنا يتم وضع البيانات، ويجب وضع البيانات مرمّزة حسب الترميز المختار في النقطة السابقة. 

الترميز base64

يساعد ترميز Base64 على تحويل البيانات الثنائية binary data إلى نصوص بحيث يسهل نقلها عبر الإنترنت. يتم ذلك عبر تحويل البيانات إلى بت bits، ومن ثم جمعها وتحويلها إلى حروف Base64. هذه الحروف تتكون من الأبجدية الإنجليزية الكبيرة والصغيرة A-Z a-z والأرقام 0-9 بالإضافة إلى “+” و “/”. أيضاً يتم استخدام “=” في النهاية لمعرفة وجود حشوة padding.

مثال نص
شيفرة هذا النص هي :

data:text/plain;charset=utf-8;base64,2YXYsdit2KjYpw==

أنسخ الشيفر و ألصقها في قائمة  الروابط و سترى بنفسك . 

مثال الصور

أدوات التحويل إلى data URI

يوجد الكثير من الأدوات التي يمكنها تحويل الوسائط المتعددة إلى بيانات مرمّزة بترميز Base64.

• DataURLMaker، خدمة على الويب تتيح تحويل الصور إلى بيانات URI باستخدام ترميز Base64، ووضعها تلقائياً في وسم <img>.
• data: URI Generator، خدمة على الويب أيضاً. تقبل جميع أنواع الملفات وليست محددة بالصور.
• The data: URI kitchen، خدمة أخرى على الويب، ولكن تتيح تحكم أكثر بنوع البيانات، على سبيل المثال، إدخال HTML والتحويل مباشرة.

دعم المتصفحات

• Opera
• Chrom
• Safari
• Internet Explorer v8 – فقط للصور، للنسخ الأقل من النسخة ٨ يمكن استخدام MHTML.