عرض صور مختلفة لأجهزة أو أحجام شاشة مختلفة HTML picture Element

يسمح لك عنصر <picture> في HTML بعرض صور مختلفة لأجهزة أو أحجام شاشة مختلفة.

عنصر <picture>
يمنح عنصر <picture> مطوري الويب مزيدًا من المرونة في تحديد موارد الصور.
يحتوي العنصر <picture> على عنصر <source> واحد أو أكثر ، كل عنصر يشير إلى صور مختلفة من خلال سمة srcset. بهذه الطريقة يمكن للمتصفح اختيار الصورة التي تناسب العرض الحالي و / أو الجهاز.
يحتوي كل عنصر من عناصر <source> على سمة وسائط تحدد متى تكون الصورة هي الأنسب.
مثال

عرض صور مختلفة لأحجام الشاشات المختلفة:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source media="(min-width: 650px)" srcset="https://www.w3schools.com/html/img_food.jpg">
  <source media="(min-width: 465px)" srcset="https://www.w3schools.com/html/img_car.jpg">
<p> عنصر img مطلوب باعتباره آخر علامة فرعية من كتلة إعلان الصورة.  <img src="https://www.w3schools.com/html/img_girl.jpg" style="width:auto;">
</picture>
<p> قم بتغيير حجم المتصفح لمشاهدة الإصدارات المختلفة من الصورة التي يتم تحميلها بأحجام مختلفة لإطار العرض.
يبحث المستعرض عن أول عنصر مصدر حيث يتطابق الاستعلام عن الوسائط مع عرض إطار العرض الحالي للمستخدم ،
وجلب الصورة المحددة في سمة srcset. </p>

يُستخدم عنصر img لتوفير التوافق مع الإصدارات السابقة للمتصفحات التي لا تدعم عنصر الصورة ، أو في حالة عدم تطابق أي من علامات المصدر.
</p>

<p> <strong> ملاحظة: </ strong> عنصر الصورة غير مدعوم في IE12 والإصدارات الأقدم أو Safari 9.0 والإصدارات الأقدم. </ p>
</body>
</html>

ملاحظة: حدد دائمًا عنصر <img> كعنصر فرعي آخر من عنصر <picture>. يتم استخدام عنصر <img> بواسطة المتصفحات التي لا تدعم عنصر <picture> ، أو إذا لم تتطابق أي من علامات <source>.

متى تستخدم عنصر الصورة -<picture>
هناك غرضان رئيسيان لعنصر <picture>:
1. عرض النطاق الترددي-Bandwidth
إذا كانت لديك شاشة أو جهاز صغير ، فليس من الضروري تحميل ملف صورة كبير. سيستخدم المستعرض العنصر <source> الأول مع قيم السمات المطابقة ، ويتجاهل أيًا من العناصر التالية.
2. تنسيق الدعم-Format Support
قد لا تدعم بعض المتصفحات أو الأجهزة جميع تنسيقات الصور. باستخدام عنصر <picture> ، يمكنك إضافة صور بجميع التنسيقات ، وسيستخدم المتصفح التنسيق الأول الذي يتعرف عليه ، ويتجاهل أيًا من العناصر التالية.
مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source srcset="https://www.w3schools.com/html/img_avatar.png">
  <source srcset="https://www.w3schools.com/html/img_girl.jpg">
  <img src="https://www.w3schools.com/html/img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
194 / 5000

<p> يمكن استخدام عنصر الصورة عندما لا تكون تنسيق الصورة مدعومة من قبل جميع الأجهزة. </ p>

<p> سيستخدم الجهاز تنسيق الصورة الأول الذي يدعمه ويتجاهل باقي الصور. </ p> 
</body>
</html>

سيستخدم المتصفح تنسيق الصورة الأول الذي يتعرف عليه:
ملاحظة: سيستخدم المتصفح عنصر <source> الأول مع قيم السمات المطابقة ، ويتجاهل أي عناصر <source> التالية.

الدرس السابق الدرس التالي