شرح العنصر <picture> في HTML

HTML

ما هو عنصر <picture>؟

يُستخدم عنصر HTML <picture> لعرض صور متجاوبة على صفحات الويب. يتيح للمطورين توفير مصادر متعددة للصورة، وتحديد إصدارات مختلفة لأحجام أو دقة شاشات متعددة، مما يضمن تحميل الصورة الأكثر ملاءمة لكل جهاز.

فوائد الاستخدام:

• تحسين أداء الصفحة عبر تحميل الصور المناسبة لكل جهاز
• تحسين تجربة المستخدم على مختلف الأجهزة
• توفير عرض مثالي للصور على جميع أحجام الشاشات
• دعم الشاشات عالية الدقة (مثل شاشات الريتينا)

بناء الجملة الأساسي

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 400px)">
  <img src="image-small.jpg" alt="صورة متجاوبة">
</picture>

في هذا المثال، نقدم ثلاث نسخ مختلفة من الصورة. سيختار المتصفح النسخة الأنسب بناءً على حجم نافذة العرض.

أمثلة تطبيقية

التكيف مع اتجاه الجهاز

<picture>
  <source srcset="portrait.jpg" media="(orientation: portrait)">
  <source srcset="landscape.jpg" media="(orientation: landscape)">
  <img src="default.jpg" alt="صورة ذات اتجاه فني">
</picture>

يتم اختيار الصورة بناءً على اتجاه الجهاز (رأسي أو أفقي).

دعم الشاشات عالية الدقة

<picture>
  <source srcset="image@2x.jpg 2x" type="image/jpeg">
  <img src="image.jpg" alt="صورة عالية الدقة">
</picture>

ملاحظة: اللاحقة @2x تشير إلى صورة بدقة مضاعفة للشاشات عالية الدقة.

دعم تنسيقات الصور الحديثة

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="صورة بديلة">
</picture>

يتم تحميل تنسيق WebP أو AVIF إذا كان المدعوم، مع التراجع لصورة JPG التقليدية.

السمات الرئيسية

السمة	التطبيق على	الوصف
srcset	<source>	تحدد مصادر الصورة المحتملة
media	<source>	تحدد شروط استعلام الوسائط لاختيار الصورة
type	<source>	تحدد نوع تنسيق الصورة (مثل image/webp)
src	<img>	مصدر الصورة الاحتياطية
alt	<img>	النص البديل للصورة

أفضل الممارسات

ترتيب مصادر الصور

ضع مصادر الصور بترتيب تنازلي حسب الأولوية (من الأكبر إلى الأصغر)

الصورة الاحتياطية

احرص دائماً على تضمين عنصر <img> كخيار احتياطي

النص البديل

أضف نصاً بديلاً وصفياً لتحسين إمكانية الوصول

تحسين الأداء

استخدم ضغطاً مناسباً للصور المختلفة لتحسين سرعة التحميل

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

يدعم عنصر <picture> في جميع المتصفحات الحديثة:

• Chrome 38+
• Firefox 38+
• Safari 9.1+
• Edge 13+
• Opera 25+

ملاحظة: لا يدعم Internet Explorer هذا العنصر، لكن الصورة الاحتياطية ستظهر.

تم تقديم عنصر <picture> في HTML5 لمعالجة تحديات الصور المتجاوبة في التصميم الحديث للويب.

دمج <picture> مع <source> و <img> يوفر حلاً قوياً لعرض الصور بشكل مثالي على جميع الأجهزة.

كيف كان المقال؟