عنصر الصورة

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

مثلما يعتمد العنصر srcset على السمة src، يعتمد العنصر picture على العنصر img. يلتف العنصر picture حول عنصر img.

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

لن يعمل العنصر picture إذا لم يتوفّر عنصر img متداخل في العنصر 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" loading="lazy" decoding="async">
</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" loading="lazy" decoding="async">
</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" loading="lazy" decoding="async"
    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" loading="eager" decoding="sync">
</picture>

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

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

هناك نوع واحد من الصور قد لا تحتاج فيه إلى أي من الحلين: الرموز. هذه هي الخطوة التالية.

التحقق من فهمك

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