نظرة سريعة على التعامل مع الصور فى تطبيقات الويب

لا يخلو تطبيق من التعامل مع الصور, كثيرة كانت أو قليلة, فلابد للتطبيق من عرض للصور, ولكن الصور تحتاج أليه عمل جيدة , حتى لا تتسبب فى مأساة للتطبيق, وقد تكون مشكلة كبرى تتطلب المزيد من العمل لنصل إلى أفضل حل يمكن.

سأعرض عليكم فى هذا المقال المختصر بعض الاسئلة وبعض النصائح عند التعامل مع الصور إن شاء الله .

كيف أقوم بتخزين الصور فى التطبيق ؟

بداية, يقوم المستخدم برفع الصورة من خلال أداة تحميل الصورة

file

الخطوة التالية بعد رفع الصورة إلى السيرفر, هو إستقبال هذة الصورة وتخزينها , ولكن أين أقوم بتخزينها , فإليك بعض النصائح :-

  • لا تقوم بتخزين الصور داخل قاعدة البيانات إلا للضرورة, أو لمتطلبات العمل, لإن ذلك سيزيد من حجم قاعدة البيانات بشكل هائل وسريع.
  • الصور نفسها يتم تخزينها فى “فولدر”. ويحفظ فقط ” الاسم” داخل قاعدة البيانات.
  • لا تقوم بتخزين المسار كاملاً فى قاعدة البيانات , فقط “الاسم” وذلك لإمكانية نقل الصور من “فولدر” إلى “فولدر” أخر , أو سيرفر آخر.
  • إذا كان التطبيق قائم على الصور, فيفضل البحث عن أحد مزودي خدمه تخزين ومعالجة الصور. لإنه سيقدم لك العديد من المزايا كالحصول على أحجام مختلفة من الصور, وسرعة وجودة وصول الصور إلى المستخدمين , إضافة إلى التحكم فى وضوح الصور, و إمكانية وضع علامة مائية, وإضافة التأثيرات وضبط الـ “cache” للصور, والعديد من مزايا معالجة الصور الأخرى. حيث سيوفر لك نظاماً كاملاً للتعامل مع الصور . وإن كانت كل هذة الأمور السابقة وغيرها يمكنك أن تقوم بها بنفسك, إلا أن مزود الخدمة منك سيوفر عليك الوقت والجهد والجودة والتكلفة. يمكنك البحث فى جوجل عن CDN for Images و كلمة CDN هى إختصاراً لـ Content Delivery Network (شبكة تسليم محتوي). وستعرف المزيد من نتائج البحث عن مزودي خدمه تخزين ومعالجة الصور. ومثال على ذلك  https://www.imgix.com/ أو https://cloudinary.com/
  • احرص دوماً على أن يكون لديك مكان واحد فقط فى الكود تقوم فيه بحفظ واسترجاع الصور , على سبيل المثال : يكون لديك class واحد به دالتين أو أكثر حسب الحاجه , لحفظ وأسترجاع الصور, وذلك لإمكانية إعادة الأستخدام , وفى المقام الأول, سهولة التعديل. وإليك نموذج مبسط :-

imageHelpers.PNG

بالطبع هذا نموذج مبسط حتى تصلك الصورة التى أتحدث عنها, وكما تري من الصورة, قمنا بأستخدام HttpPostedFileBase كمثال , فقد يكون البديل عنها FileUploadControl أو ربما Image أو string عند العمل مع Base64 . المهم أن تقوم بضبط الكود ليناسب متطلبات العمل .

الكود فى الصورة السابقة قائم على التخزين فى “فولدر” , وقمنا بكتابة enum لتحديد اسماء “الفولدرز” التى سنقوم بحفظ الصور فيها.

لدينا ثلاثة من الدوال:-

  • Save لحفظ الصورة مع تحديد اسم الصورة واسم “الفولدر” .
  • GetVirtualPath للحصول على مسار الصورة استعداداً لإرسالها إلى المستخدم.
  • Delete لحذف الصورة .

كما ذكرنا من قبل, يمكنك التعديل فى الكود ليناسب إحتياجاتك .

ماذا استفدنا من الكود السابق ؟

تكمن الفائدة فى أن لدينا مكان واحد فقط للتعامل مع حفظ واسترجاع وحذف الصور. فقد تقوم بنقل الصور من “فولدر” إلى “فولدر” آخر, أو ربما سيرفر آخر. فحينها يمكنك فقط التغيير فى هذا المكان مع ضمان أن عمل التطبيق لن يتأثر, وإن وجد هنا خطأ, فسيكون فى هذا المكان فقط.

حفظ الصورة

احرص على هذة الأمور عند حفظ الصورة :-

  • إعادة تسمية الصور باسماء فريدة لا تتكرر, لإن تكرار الاسم يعنى استبدال القديم.
  • احفظ الصورة فى “الفولدر” واحفظ اسم الصورة فى قاعدة البيانات, الاسم وليس المسار كامل.
  • حفظ الصورة باحجام مختلفة أو استخدام اداة لمعالجة الصور عند العرض مثل ImageResizer  أو غيرها.

تسليم الصور إلى المستخدم

نأتى الان إلى نقطة مهمة جداً, وهى تسليم الصور إلى المستخدم. فقد يكون هذا التسليم خلال عرض الصورة فى تطبيق الويب فى المتصفح, أو ربما تطبيقات للأجهزة الذكية .

فى كل الأحوال, إحرص على التالي :-

  • لابد أن تصل الصورة إلى العميل بالحجم والمقاس المناسب للعرض.
  • لابد من عرض الصور للمستخدم باستخدام ما يعرف بـ Lazy Loading.
  • لابد من وضع الصور داخل الـCache لتفادي إعادة تحميلها بدون جدوى.
  • تسليم المسار كاملاً عند العمل مع التطبيقات الذكية لسهولة تغييره من السيرفر دون تأثر التطبيق, فهو فقط سيعرض ما يأتى إليه.
  • كتابة Alt مع كل صورة وذلك لغرض SEO .

 

هذا ما ورد إلى ذهني الان وأردت مشاركتكم به, إلى هنا نصل للختام  ,و نرجو من الجميع المشاركة لإضافة المزيد من النصائح لنستفيد جميعاً.

نسأل الله التوفيق للجميع .

Advertisements

رأيان حول “نظرة سريعة على التعامل مع الصور فى تطبيقات الويب”

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

شعار وردبرس.كوم

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   /  تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   /  تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   /  تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   /  تغيير )

Connecting to %s