عنصر picture في HTML
عنصر img واحد يكفي لكثير من الصفحات. عندما تحتاج ملفات مختلفة لشاشات أو صيغ مختلفة — قصّ عريض على سطح المكتب، قصّ أضيق على الهواتف، أو صيغة حديثة مع احتياطي JPEG — يقدّم عنصر picture مرشّحين. يختار المتصفح واحدًا؛ وimg الاحتياطي يبقي العملاء الأقدم وإمكانية الوصول مغطّيين.
ماذا يضيف picture
picture حاوية. بداخله تضع صفرًا أو أكثر من عناصر source وimg احتياطيًا واحدًا بالضبط. كل source يمكن أن يصرّح متى ينطبق (media) أو أي صيغة هو (type)، وأين يعيش الملف (srcset). الـ img ليس زخرفة اختيارية: هو الاحتياطي المطلوب ومكان alt.
إجابة مباشرة
غلّف عنصرًا أو أكثر من <source> و<img> احتياطيًا داخل <picture>. استخدم media لشروط الـ viewport وtype لصيغ مثل WebP. الـ img ما زال يحتاج src وalt. يمكن للمبتدئين البدء بعرضين من نفس الصورة قبل جمع كل الصيغ الحديثة.
توجيه فني مع media
التوجيه الفني يعني قصّات أو تخطيطات مختلفة لـ viewports مختلفة — وليس فقط «نفس الصورة أصغر.» media على source يتيح توجيه التخطيطات العريضة والضيقة إلى ملفات مختلفة.
picture مع media وimg احتياطي
html<picture>
<source media="(min-width: 800px)" srcset="images/wide.jpg">
<source media="(min-width: 400px)" srcset="images/medium.jpg">
<img src="images/small.jpg" alt="Mountain trail at sunrise">
</picture>قراءة عينة media
- تُدرج المصادر من شروط أكثر تحديدًا نحو أوسع في أنماط التدريس الشائعة؛ والمتصفح ما زال يقيّم ويختار مطابقة
srcsetعلىsourceيشير إلى عنوان URL لملف المرشّح- الـ
imgالنهائي يوفّرsrcوaltعندما لا يطابق أي source أو عندما يكون دعمpictureغير مكتمل - غيّر حجم النافذة في التمرين لترى أي ملف مناسب — استخدم Network في DevTools إن أردت تأكيد الطلب
اختيار الصيغة مع type
أحيانًا تُرسل نفس التركيبة كـ WebP للمتصفحات الداعمة وJPEG للبقية. type يخبر المتصفح بنوع MIME حتى يتخطّى الصيغ غير المدعومة دون تنزيلها أولًا.
picture مع type وimg احتياطي
html<picture>
<source type="image/webp" srcset="images/hero.webp">
<img src="images/hero.jpg" alt="Product hero on a clean desk">
</picture>أبقِ نطاق اليوم الأول صغيرًا
لا تحتاج كل صيغة وكل breakpoint من المحاولة الأولى. اجعل picture واحدًا بمرشّحين معقولين يعمل، أبقِ alt صادقًا على الـ img، ثم وسّع. واصفات كثافة srcset المتجاوبة وسمات sizes المتقدمة تأتي لاحقًا مع نموّك.
alt يبقى على img
لا تضع نص إمكانية الوصول على source فقط. قارئات الشاشة والعرض الاحتياطي يعتمدان على الـ img. قواعد الزخرفة من جلسة Images ما زالت تنطبق: الصور الإعلامية تحتاج alt حقيقيًا؛ الزخرفة الخالصة يمكن أن تستخدم alt="".
picture مقابل img واحد
استخدم img عاديًا عندما يكفي ملف واحد. لجأ إلى picture عندما تحتاج حقًا ملفات مختلفة لشروط — توجيه فني حسب الـ viewport أو تبديل الصيغة. العلامات الزائدة بلا حاجة حقيقية تعقّد الصيانة فقط.
عادات الترتيب والاحتياطي
أدرج عناصر source قبل الـ img. أدرج الـ img دائمًا. إن نسيت الاحتياطي، تعتبر بعض المتصفحات وكثير من أدوات التحقق التعليمية النمط ناقصًا. اختبر بنافذة ضيقة ونافذة عريضة، ومع متصفح قد لا يفضّل صيغتك المتقدمة.
تمرين في محرّرك
- جهّز عرضين لنفس الصورة (أو ملفين واضحين للتمرين).
- ابنِ
pictureباستعلامي media علىsourceوimgاحتياطي واحد. - غيّر حجم نافذة المتصفح وراقب أي ملف مناسب.
- أكّد أن
altيبقى على الـimg، وليس فقط في تعليق. - اختياريًا أضف
sourceبصيغة WebP معtype="image/webp"فوقimgمن نوع JPEG وأكّد أن النمط ما زال يعرض صورة في كل مكان.
أخطاء سهلة
- نسيان الـ
imgالاحتياطي - وضع
altعلىsourceفقط بدلًا من على الـimg - التعقيد بصيغ كثيرة قبل أن يعمل نمط media الأساسي
- استخدام
pictureعندما كانimgواحد محسّن كافيًا - قصّات غير متطابقة تفاجئ المستخدمين عند عبور الـ viewport لنقطة توقف
- الخلط بين
srcsetعلىsourceوhrefالرابط
ملخص
pictureيقدّم عدة مرشّحي صورة؛ المتصفح يختار واحدًا- استخدم
sourceمعimgاحتياطي مطلوب mediaيوجّه اختيار الـ viewport؛typeيوجّه اختيار الصيغةaltيبقى على الـimg- ابدأ بسيطًا: عرضان أو صيغة حديثة واحدة مع احتياطي JPEG
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى