عنصر الصورة

أوضحنا في الوحدة السابقة كيف تتيح لك السمة srcset توفير نُسخ مختلفة الحجم من الصورة نفسها. يمكن للمتصفّح بعد ذلك تحديد الإصدار المناسب للاستخدام. إذا أردت تغيير الصورة بالكامل، ستحتاج إلى العنصر picture.

بالطريقة نفسها التي تستند بها السمة srcset إلى السمة src، يستند العنصر picture إلى العنصر img. يحتوي العنصر picture على العنصر img.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

إذا لم يكن هناك عنصر img مضمّن داخل العنصر picture، لن يعمل العنصر picture.

على غرار السمة srcset، سيعدّل العنصر picture قيمة السمة src في العنصر img. ويكمن الفرق في أنّ السمة srcset تقدّم اقتراحات للمتصفّح، بينما يقدّم العنصر picture أوامر. يمنحك ذلك التحكّم.

source

يمكنك تحديد عدة عناصر source داخل عنصر picture، كل منها يتضمّن السمة srcset الخاصة به. بعد ذلك، ينفّذ المتصفّح أول شرط يمكنه تنفيذه.

الأشكال المصوّرة

في هذا المثال، هناك ثلاث صور مختلفة بثلاثة تنسيقات مختلفة:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image."
    width="300" height="200">
</picture>

يشير العنصر الأول source إلى صورة بالتنسيق الجديد AVIF. إذا كان المتصفّح قادرًا على عرض صور AVIF، سيختار ملف الصورة هذا. بخلاف ذلك، ينتقل إلى عنصر source التالي.

يشير العنصر الثاني source إلى صورة بتنسيق WebP. إذا كان المتصفّح قادرًا على عرض صور WebP، سيستخدم ملف الصورة هذا.

وفي حال عدم توفّرها، سيعود المتصفّح إلى ملف الصورة في السمة src للعنصر img. هذه الصورة بتنسيق JPEG.

وهذا يعني أنّه يمكنك البدء في استخدام تنسيقات صور جديدة بدون التضحية بالتوافق مع الأنظمة القديمة.

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

أحجام الصور

بالإضافة إلى التبديل بين تنسيقات الصور، يمكنك التبديل بين أحجام الصور. استخدِم السمة media لإعلام المتصفّح بعرض الصورة. ضَع طلب بحث وسائط داخل السمة media.

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image."
    width="300" height="200">
</picture>

في هذا المثال، أنت تخبر المتصفّح أنّه إذا كان عرض إطار العرض أكبر من 75em، يجب استخدام الصورة الكبيرة. بين 40em و75em، يجب أن يستخدم المتصفّح الصورة المتوسطة الحجم. يجب أن يستخدم المتصفّح الصورة الصغيرة تحت 40em.

يختلف ذلك عن استخدام السمتَين srcset وsizes في العنصر img. في هذه الحالة، أنت تقدّم اقتراحات للمتصفّح. العنصر source يشبه الأمر أكثر من الاقتراح.

يمكنك أيضًا استخدام واصف كثافة البكسل داخل السمة srcset لعنصر source.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

في هذا المثال، لا تزال تخبر المتصفّح بما يجب فعله عند نقاط توقّف مختلفة، ولكن يمكن للمتصفّح الآن اختيار الصورة الأنسب لكثافة وحدات البكسل في الجهاز.

الاقتصاص

إذا كنت بحاجة فقط إلى عرض نُسخ مختلفة الحجم من الصورة نفسها، فإنّ srcset هو الخيار الأفضل. ولكن إذا كانت الصورة لا تبدو جيدة بأحجام أصغر، يمكنك تجربة إنشاء نسخة مقصوصة من الصورة بدلاً من ذلك.

قد يكون للصور المختلفة نِسب عرض إلى ارتفاع مختلفة لتناسب سياقها بشكل أفضل. على سبيل المثال، قد تريد عرض صورة مقصوصة ضيقة وطويلة على متصفح الأجهزة الجوّالة، بينما قد تريد عرض صورة مقصوصة عريضة وقصيرة على متصفح الكمبيوتر.

في ما يلي مثال على صورة رئيسية تغيّر محتواها وشكلها استنادًا إلى عرض إطار العرض. أضِف السمتَين width وheight إلى كل عنصر source.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" fetchpriority="high">
</picture>

يُرجى العِلم أنّه لا يمكنك تغيير السمة alt حسب مصدر الصورة. عليك كتابة السمة alt التي تصف كلاً من الصورة بالحجم الكامل والصورة التي تم اقتصاصها.

من المحتمل أنّك لن تحتاج إلى استخدام العنصر picture لمعظم الصور السريعة الاستجابة، إذ إنّ السمتَين srcset وsizes في العنصر img تغطيان العديد من حالات الاستخدام. ولكن في الحالات التي تحتاج فيها إلى تحكّم أكثر دقة، يكون العنصر picture أداة فعّالة.

هناك نوع واحد من الصور قد لا تحتاج فيه إلى أي من الحلّين، وهو الرموز. هذا ما سيحدث.

اختبِر معلوماتكَ

اختبِر معلوماتك حول عنصر الصورة