HTML <picture> Element

-

ميزة رائعة في HTML تعمل على توفير أكثر من صورة ويتم عرض الصورة المناسبة حسب نوع الجهاز او حجم الشاشة، وبالتالي يمكن في بعض الحالات ما يكون في حاجة الى تحميل صورة بحجم كبير وفي هذه الخاصية يتم التحكم بذلك. أيضا ممكن نحمل مجموعة صور بأنواع مختلفة ويتم عرض المناسب منها حسب نوع الجهاز وحجم الشاشة.

بعض المتصفحات لا تدعم جميع أنواع الصور، وبالتالي استخدام مجموعة من الصور بأنواع مختلفة يضمن عرض الصورة الأنسب للمتصفح

تمام التمام 

طريقة الكتابة : 

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture> 

في الكود السابق البداية بتكون باستخدام <picture> وينتهي أيضا ب </picture> وفي الوسط مجموعة من الصورة يتم تحديدها من خلال srcset attribute . أيضا استخدمنا ال media attribute بهدف تحديد العنصر المناسب لحجم الشاشة في المثال السابق يتم عرض اول صورة في حال كان حجم الشاشة 650 او اكبر ، وفي الصورة الثانية يتم عرضها عندما يكون حجم الشاشة 465 او اكبر.

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

ملاحظة : ينصح دائما باستخدام

 <img> element 

في اخر   

<picture> element

  وذلك بهدف عرض هذه الصورة في حال حدوث مشكلة للصورة السابقة