تحتوي الصفحة على صور WebP صغيرة وsrcset صحيحة، لكن الهاتف ما زال ينزل نسخة كبيرة. راجع sizes قبل إعادة ضغط الملفات كلها: قد تكون القيمة تصف صورة بعرض الشاشة بينما البطاقة تشغل جزءًا منها. هذا الفرق يظهر كثيرًا بعد تغيير شبكة التصميم.
sizes ليست عدد الأعمدة
توضح وثائق MDN لعنصر img استخدام sizes مع مرشحات العرض w في srcset. يختار المتصفح المصدر بالاستناد إلى الحجم الموصوف وعوامل أخرى، والقيمة الافتراضية عند غياب الوصف هي عرض منفذ العرض. لا تُخلط مرشحات w وx في القائمة نفسها.
قِس البطاقة لا الصورة الملفية
في قائمة مشاريع افتراضية، اختبر شاشة ضيقة بعمود واحد، وشاشة متوسطة بعمودين، وكمبيوتر بثلاثة أعمدة. اكتب عرض الصورة الفعلي بالبكسل، لا عرض الحاوية بما فيها المسافات. ثم قارن وصف sizes بتلك القياسات عند نقاط التوقف نفسها.
- سجل عرض المنفذ وعرض عنصر الصورة وكثافة الجهاز.
- اقرأ currentSrc لمعرفة الملف المختار فعليًا.
- قارن الأبعاد الطبيعية للملف وحجم النقل بالمساحة المطلوبة.
- كرر في جلسة اختبار بكاش معلوم، لأن مصدرًا محملًا سابقًا قد يؤثر في ملاحظتك.
ملف مناسب لا يضمن قصًا مناسبًا
اختيار مصدر أصغر لا يصلح object-fit أو موضع الجزء المهم. قد تنخفض البايتات بينما يختفي رأس هاتف أو عنوان واجهة داخل الغلاف. افصل اختبار المصدر المختار عن اختبار القص والنص البديل وحجز المساحة.
لا تفسر كل اختيار كبير على أنه خطأ؛ كثافة الشاشة وتفضيلات المتصفح وظروف أخرى قد تبرره. استخدم مجموعة قياسات بدل فرض ملف واحد على جميع الأجهزة. واحتفظ بمصدر مناسب عند فشل دعم المرشحات.
أعد المراجعة بعد تغيير التصميم
في تطوير الويب والمتاجر اربط وصف الصور بعقد التخطيط الحالي. وتراجع فرق التصميم القص في المقاسات نفسها. انخفاض حجم غلاف واحد دليل محدود؛ لا تدّع تحسن LCP للصفحة أو درجة PageSpeed دون قياس رحلة التحميل كاملة.
صورة توضيحية أصلية لشرح الفكرة، وليست لقطة نظام عميل أو نتيجة قياس فعلية.
