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