CSS Responsive image

اكيد بنسبة 100% الموقع الي انت هتعمله هيكون فيه صور؛ صح😊؟

وهذه بعض النصائح لإضافة الصورة في الموقع:

تقيل حجم ملف الصورة قدر الإمكان حتى يتم تحميلها بشكل أسرع في الموقع
يُفضل استخدام هؤلاء الثلاث أنواع من الصور فقط JPEG, GIF, and PNG.
يجب ان لا يحدث مشاكل في الصورة عند عرض الصور على جميع احجام الشاشات لذلك يجب ان تكون صور متجاوبة (Responsive image)

وهذه بعض النصائح لعمل ال Responsive image

النصيحة الأولي:
استخدام خاصية ال width وتكون قيمتها نسبة مئوية وغالباً تكون 100%
وايضاً نستخدم خاصية ال height وتكون قيمتها auto
ويكون الكود كالتالي:


img {
    width: 100%;
    height: auto;
  }

⚠ويُفضل استخدام هذه الأكواد فيهذه الحالة

النصيحة الثانية :
- استخدام خاصية ال max-width وتكون قيمتها نسبة مئوية وغالباً تكون 100%
- وايضاً نستخدم خاصية ال height وتكون قيمتها auto
ويكون الكود كالتالي:


img {
    max-width: 100%;
    height: auto;
  }

⚠وهذه الطريقة نستخدمها إذا كان لدينا صورة ونُريد عرضها على الموقع بالحجم الطبيعي لها ولكن في حالة الشاشات الصغيرة؛ هذه الصورة تأخذ كامل المساحة للشاشة كما فيهذا المثال

النصيحة الثالثة :
استخدام الاكواد التالية معاً

<picture> </picture>
<Source media="( )" srcset=" " />
<img src=" " >

Picture ترجمتها صورة.
ويُستخدم هذا العنصر إذا كان لدينا صورتان او أكثر؛ مثلا إذا كان لدينا صورتان وأردنا ظهور الصورة الأولى في حالة الشاشات الصغيرة مثل الموبايل ولكن في حالة الشاشات الكبيرة لا نريد اظهار الصورة الأولى ولكن اظهار الصورة الثانية بدلا منها؛ فهذا هو العنصر المناسب لذلك.
وهذا العُنصر يكون بداخله عنصرين اساسيين هما:

Source هذا العنصر:
- لا يوجد لديه نهاية وسم (closing tag).
- وله اثنان attributes أساسيين هما:
  - Media : وتكون قيمته عبارة عن عرض الشاشة التي سوف يتم فيها عرض الصورة وفى المثال الذى لدينا يتم عرض الصورة الاولى فى حالة الشاشات التى عرضها اقل من 500px
  - Srcset : وتكون قيمته عبارة عن مسار واسم الصورة او لينك الصورة.
img : كما شرحنا هذا العنصر في الأعلى؛ وتظهر الصورة التي بداخله في حالة عدم ظهور الصور الموجودة داخل عنصر ال source

ويكون الكود كالتالي:


<picture>
  <source media="(max-width: 500px)" srcset="https://bit.ly/2xRKZv8">
  <img src="https://bit.ly/2yDF3Xf" alt="ali hassan">
</picture>

مشكلة وحلها

المشكلة:
سنفترض مثلا عندك صفحة طويلة جدا في الموقع وتحتوي على العديد من الصور عالية الجودة وبالتالي الموقع سوف يستغرق وقت طويل جداً لتحميل هذه الصفحة
حل المشكلة:
يوجد خاصية جديدة في ال CSS تُسميLazy loadingوظيفتها عدم إظهار الصور في الموقع الا اذا احتجنا اليها

مثال علي ذلك:
الصور التي في أسفل الموقع لن يتم تحميلها للزائر الا إذا ذهب الزائر الي اسفل الصفحة

شرح استخدام css lazy load

نستخدم خاصيةlazy loadعن طريق إضافة attribute يُسميloadingالي عنصر ال<img />وتكون قيمتهlazy
ويكون الكود النهائي كالتالي:


<img src="example.jpg" loading="lazy" alt="..." />