العنصر <picture>

يُمثِّل العنصر <picture> حاويةً تُستخدَم لتحديد عدِّة مصادر عبر العنصر <source> لصورة <img> محتواة داخله؛ وسيختار المتصفح أنسب مصدر للصورة اعتمادًا على تخطيط الصفحة (أي الصندوق المحتوى فيه هذا العنصر) والجهاز الذي ستُعرَض الصورة داخله (هل شاشته عادية أم عالية الدقة).

مثال عن استخدام العنصر <picture> لتخديم صورة شعار عريضة إن تحقق شرط media query معيّن (وهو أن يكون العرض على الأقل 600 بكسل) وذلك باستخدام الخاصية media مع العنصر <source>؛ وإذا لم تحقق شرط media query فسيتم تخطي العنصر <source> والانتقال إلى ما بعده:

<picture>
 <source srcset="logo-wide.png" media="(min-width: 600px)">
 <img src="logo-narrow.png" alt="Logo">
</picture>

مثال عن استخدام العنصر <picture> لتخديم صورة بنوع MIME معيّن، وإن لم يدعم المتصفح ذاك النوع (أي صيغة الصور لا تعمل في المتصفح) فسيتم تخطي العنصر <source> والانتقال إلى ما بعده:

​<picture>
 <source srcset="logo.svg" type="image/svg+xml">
 <img src="logo.png" alt="Logo">
</picture>

تصنيفات المحتوى	عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
المحتوى المسموح	عنصر <source> صفر مرة أو أكثر، يتبعه العنصر <img>.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل العناصر التضمينية.
واجهة DOM	HTMLPictureElement

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

Chrome	Firefox	Edge	Safari	Opera
38	38	13	9.1	25

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

مصادر ومواصفات

• معيار HTML Living Standard.