اكيد بنسبة 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>