تسمح الصور المتجاوبة للمتصفح باختيار أفضل صورة للجهاز — مما يوفر عرض النطاق الترددي على الهواتف وتقديم صور حادة على شاشات عالية الدقة.
srcset + sizes — نفس الصورة، دقة مختلفة
html
srcset يسرد الصور المرشحة مع عروضها الجوهرية (400w = 400 بكسل عرض).sizes يخبر المتصفح بمدى عرض الصورة المعروضة في نقاط توقف مختلفة (هنا: عرض العرض الكامل أقل من 600 بكسل، وإلا النصف).sizes + كثافة البكسل للجهاز لاختيار أصغر صورة تبدو حادة — قبل تحميل أي شيء.قد يختار الهاتف small.jpg; قد يختار جهاز كمبيوتر محمول Retina يعرضها بنسبة 50% large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
يستخدم المتصفح الأول <source> يدعمه/يطابقه. استخدم <picture> عندما تحتاج إلى صيغ مختلفة (قدم AVIF/WebP مع تراجع JPEG) أو قص مختلف لكل حجم شاشة (توجيه فني) — أشياء لا يمكن لـ srcset وحدها فعلها.
srcset + sizes.<picture>.تقديم صور بالحجم الصحيح والصيغة الحديثة هو أحد أكبر المكاسب الأداء للويب — فهو يقلل من استخدام بيانات الهاتف المحمول بشكل كبير ويحسن Largest Contentful Paint.
تسمح هذه الأدوات الأصلية للمتصفح باتخاذ الخيار الأمثل تلقائيًا، مع تراجع بديل للمتصفحات القديمة.