HTML الوسم <picture>

تعريفه

نستخدم الوسم <picture> لعرض صورة واحدة في الصفحة و لكن هذه الصورة يمكن أن تتبدل لصورة أخرى نسبةً لحجم الصفحة الذي نراه مناسباً لتبديل الصور.

بداخل الوسم <picture> يجب إضافة الصور التي تريد تجهيزها لكي يتم عرضها نسبةً لحجم عرض الشاشة مع وضع كل صورة منهم بداخل وسم <source> و تحديد متى سيتم عرض كل صورة منهم بواسطة كود CSS.

بالإضافة لذلك, يجب وضع صورة إفتراضية بواسطة الوسم <img> حتى يتم عرضها في حال لم يتم عرض أي صورة تم تجهيزها لأي سبب كان.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <picture>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا باستخدام الوسم <picture> لتجهيز ثلاث صور يتم عرض واحدة منها فقط نسبةً لحجم الشاشة:

• الصورة الأولى وضعناها بداخل الوسم <source> و حددنا أنه يجب عرضها في حال كان حجم الشاشة أكبر أو يساوي من 600 بكسل.
• الصورة الثانية التي وضعناها بداخل الوسم <source> و حددنا أنه يجب عرضها في حال كان حجم الشاشة أكبر أو يساوي من 450 بكسل.
• الصورة الثالثة التي وضعناها بداخل الوسم <img> يتم عرضها في حال لم يتم عرض أي صورة وضعناها قبلها.

<picture>
	<source media="(min-width:600px)" srcset="pic-1.jpg">
	<source media="(min-width:450px)" srcset="pic-2.jpg">
	<img alt="Default Image" style="width: auto;" src="default.jpg">
</picture>
		

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

عند وضع الصور بداخل الوسم <picture> قم دائماً بوضع الوسم <img> حتى يتم عرض الصورة الموضوعة فيه في حال لم يتم عرض أي صورة موضوعة قبله.

استخدام الوسم <picture> يشبه كثيراً استخدام الوسمين <video> و <video> حيث نقوم بوضع عدة وسوم <source> بداخله و نتوقع من المتصفح أن يختار الأفضل منها ليعرضه للمستخدم, مع فارق واحد و هو أننا نحن من نحدد له كيف سيختار الصورة الأفضل بواسطة قواعد CSS.