التعامل مع الصور وبناء مواقع سريعة. - مقال كلاود
 إدعم  المنصة   
makalcloud
تسجيل الدخول

التعامل مع الصور وبناء مواقع سريعة.

دائما ما تكون الصور عقبه كبيرة نحو اداء اسرع وافضل للمواقع سنتكلم هنا عن الحلول للتغلب علي الصور و بناء مواقع سريعة.

  نشر في 10 شتنبر 2016 .

سرعة موقعك والحفاظ علي اداء موقعك دائما ما تصطدم بعقبة كبيرة وهي الصور سنتكلم هنا عن الخطوات للتعامل مع الصور لتحسين اداء وسرعة موقعك.


توجد عده طرق للتعامل مع الصور للحفاظ علي اداء وسرعة موقعك:

- Optimize images

- CSS Sprites

- Lazyloading / Defer images

- Data URI



- تحسين الصور - Optimize images

المقصود هنا بتحسين الصور هو تقليل حجم الصورة بدون ان تتأثر جودة الصورة و ايضا حذف واقتصاص الصورة علي الحجم المستخدم فقط وخفض عمق الالوان في الصورة وهذا يعمل علي خفض حجم الصورة المستخدمة ، يمكنك استخدام اى من محررات الصور مثل (GIMP , Photoshop) لفعل هذا و ايضا يوجد الكثير من مواقع الويب لتحسين الصور مثل (tinypngoptimizilla.).


- تجميع الصور - CSS Sprites

تخيل ان موقعك يحتوي علي 5 صور سيقوم المتصفح بتحميل كل صورة فرديا وهذا يعني زيادة في عدد الطلبات "Requests" و دائما ما نهدف الي تقليل عدد الطلبات لزيادة سرعة واداء الموقع ، تخيل ايضا اننا يمكننا تجميع جميع الصور في الموقع في صورة واحدة وهذا ما نقصده بالـCSS sprites.

اذا المقصود هنا بتجميع الصور هو تجميع جميع الصور في الموقع في صورة واحدة و هذا يعمل علي تقليل عدد الطلبات مما يؤدي الي زيادة في اداء وسرعة موقعك.

- كيف نقوم بعمل تجميع للصور واستخدامها في الموقع؟

كل ما عليك هو تجميع الصور في صورة واحده و تعيين هذه الصورة كخلفية "background" ويمكنك التحكم في الصور من خلال خاصية "background-position".


مثال علي CSS sprites

في الصورة التي في الأعلي بدلا من استخدام كل صورة فرديا تم تجميع الصورتين معا في صورة واحدة ومن خلال خاصية background و background-position  يمكننا التحكم في الصورة وتحديد اى من الصورتين تظهر.

التحكم في الصورة من خلال background.

في الصورة نجد انه تم استخدام خاصية background لوضع الصورة ومن ثم تحديد اى من الصورتين المراد اظهاراها من خلال خاصية background-position ونجد ايضا عندما اردنا تغيير الصورة عن حدوث حدث hover فقط قمنا بتغيير قيمة خاصية background-position ، من خلال عملية دمج الصور مع بعضها استطعنا تقليل عدد الطلبات التي كان سيقوم بها المتصفح اذا قمنا باستخدام كل صورة علي حدي.


- تأجيل الصور -  Defer images

من الطرق البسيطة للتعامل مع الصور هو تأجيل ظهور الصور للمستخدم حتي نهاية تحميل الموقع.

تعتمد فكرة تأجيل الصور علي استخدام صورة اخري او عدم استخدام اى صور وعند انتهاء المتصفح من تحميل الموقع نقوم باستخدام الـJavaScript باستدعاء الصور الحقيقية في الأماكن المخصصة لها.

في البداية علينا استخدام data-attrbiute ووضع مكان الصورة التي نريدها بداخله ، واستخدام صورة اخري في الـsrc  او تركها بدون اى شئ كما في الصورة.

img markup


ثانيا باستخدام الـJavaScript نقوم بتحديد جميع الصور ومن ثم نقوم باستبدال الـdata-attrbiute مع الـsrc الخاص بالصورة ونقوم باستدعاء الـfunction عند انتهاء الصفحة من التحميل كليا.

تغيير مسار الصور عند الأنتهاء من تحميل الموقع

يمكنك الأطلاع علي الكود من هنـا.


ايضا العديد من الناس يفضلون استخدام LazyLoad Plugin  وهي اداة تعمل علي عدم اظهار الصور الا عند القدوم اليها بمعني ان الصورة لن تظهر الا اذا قام المستخدم بالنزول اليها. 



- بيانات المورد الموحد - Data URI 

كثير من الناس لا علم لهم بإمكانية اضافة الصور داخل HTML&CSS بدون تحميل لاي مصدر وتكون الصورة مشفرة ضمن الملف دون الحاجة الي طلب تحميل الموارد من المتصفح و تسمي هذه العملية base64 encoding.


كيف اقوم بتضمين الصور وتحويلها الي base64:

- يمكنك البحث عن اى اداة تقوم بتحويل الصور الي base64 وليكن ذلك الموقع مثلا.

- تقوم برفع الصورة و من ثم ستجد ان الموقع قد قام بتحويل الصورة الي base64.

- تأخذ الصيغة التي اخرجها لك الموقع وتقوم بنسخها في الـsrc الخاص بعنصر الـimg او داخل الـurl اذا كنت تريد تضمينها في الـCSS.

base64 encoding


الفائدة من استخدام الصور علي صيغة Base64 هو ان الصفحة ليست بحاجة الي تحميل الصورة وهذا يساعدنا علي تقليل عدد الطلبات مما يساعدنا في زيادة اداء وسرعة موقعنا.

دائما عند تحميل محتويات الموقع يتم تحميل اولا ملف الـHTML ومن ثم ملف الـCSS واخير يتم تحميل الصور ولنفترض ان موقعنا يحتوي علي 3 صور يكون عدد الطلبات هو 5 = 1 HTML ملف + 1 CSS ملف + 3 صورة.

ولكن اذا قمنا بتحويل الصور الي صيغة base64  سيكون مجموع الطلبات هو 2 فقط = 1 HTML ملف + 1 CSS ملف ،  اى قمنا نحن بتقليل عدد الطلبات من 5 الي 2 و هذا سيحدث فارق كبير في اداء وسرعه موقعنا.




في النهاية لكل شئ مما ذكرناه مميزات وعيوب سأحاول في المقالات القادمة بالحديث عن كل واحده من الطرق علي حدي وشرح المميزات والعيوب ولكن كان الهدف من هذه المقاله هو تجميع المعلومات لكيفية التعامل مع الصور في موقعك لجعل موقعك ذو اداء وسرعة افضل مما قبل.


  • 2

   نشر في 10 شتنبر 2016 .

التعليقات


لطرح إستفساراتكم و إقتراحاتكم و متابعة الجديد ... !

مقالات شيقة ننصح بقراءتها !



مقالات مرتبطة بنفس القسم

















عدم إظهارها مجدداً

منصة مقال كلاود هي المكان الأفضل لكتابة مقالات في مختلف المجالات بطريقة جديدة كليا و بالمجان.

 الإحصائيات

تخول منصة مقال كلاود للكاتب الحصول على جميع الإحصائيات المتعلقة بمقاله بالإضافة إلى مصادر الزيارات .

 الكتاب

تخول لك المنصة تنقيح أفكارك و تطويرأسلوبك من خلال مناقشة كتاباتك مع أفضل الكُتاب و تقييم مقالك.

 بيئة العمل

يمكنك كتابة مقالك من مختلف الأجهزة سواء المحمولة أو المكتبية من خلال محرر المنصة

   

مسجل

إذا كنت مسجل يمكنك الدخول من هنا

غير مسجل

يمكنك البدء بكتابة مقالك الأول

لتبق مطلعا على الجديد تابعنا