أوضحت الوحدة السابقة كيف تتيح لك السمة 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
كأداة فعّالة في الحالات التي تحتاج فيها إلى عناصر تحكّم أكثر دقة.
هناك نوع واحد من الصور قد لا تحتاج فيه إلى أي من الحلين: الرموز. هذه هي الخطوة التالية.
التحقق من فهمك
اختبر معلوماتك عن عنصر الصورة
عندما تقدّم السمة srcset
________ إلى المتصفح، يقدّم العنصر <picture>
________.
تشمل بعض إمكانات العنصر <picture>
ما يلي:
avif
أو webp
إن أمكن.