عنصر الصورة

أوضحت الوحدة السابقة كيف تسمح لك السمة 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 هذا. ويكمن الاختلاف في أنّ العنصر picture يعطي اقتراحات للمتصفّح عندما تقدّم السمة srcset أوامر. يمنحك ذلك إمكانية التحكم.

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 أداة فعالة.

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

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

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

عندما تعطي السمة srcset ________ للمتصفّح، يقدم العنصر <picture> ________.

الاقتراحات والأوامر

يوفر عنصر الصورة إمكانية التحكم، مما يجعله رائعًا للاتجاهات الفنية.

أوامر، اقتراحات

عفوًا، هذا عكس ذلك.

تشمل بعض إمكانيات العنصر <picture> ما يلي:

اقتصاص بديل

على سبيل المثال: الصور الأفقية أو الصور العمودية حسب إطار العرض.

التنسيقات البديلة

على سبيل المثال: ملفات avif أو webp بحجم أصغر وأسهل في التنزيل إن أمكن ذلك.

الأحجام البديلة

على سبيل المثال: صور أكبر للشاشات الأكبر حجمًا.

الكثافات البديلة

على سبيل المثال: توفير جودة بكسل غنية للشاشات ذات الدقة العالية.

النِسب البديلة

لا يتضمّن عنصر الصورة ميزات نسبة العرض إلى الارتفاع.