تبدو الصورة صغيرة على الهاتف، لكن هل حمل الهاتف نسخة صغيرة فعلا؟ قد يصغر القالب الصورة على الشاشة بعد تنزيل ملف كبير. سنوضح كيف تعرف الملف الذي اختاره المتصفح، وتقارن الهاتف بالحاسوب، حتى تقيس التوفير الحقيقي لا المظهر فقط.
الصورة المتجاوبة لها أكثر من حجم، ويختار المتصفح منها ما يناسب العرض وكثافة الشاشة. قائمة srcset تعرض الخيارات، وsizes تصف مساحة الصورة، أما currentSrc فيخبرك بعنوان الملف الذي اختير فعلا.
لماذا نجح الاختيار؟
أنشأ ووردبريس أحجاما متعددة عند رفع الصورة، وأضاف srcset وsizes إلى عنصر الصورة. المتصفح اختار الملف الذي يناسب مساحة العرض بدل تحميل النسخة الأكبر دائما. كما أن lazy loading منع تحميل الصورة قبل اقترابها من الشاشة.
كيف تفحص موقعك؟
- افتح أدوات المطور واختر عرض هاتف.
- مرر الصفحة حتى تقترب من الصورة؛ فقد تستخدم التحميل المؤجل، أي تؤخر تنزيلها حتى يقترب الزائر منها.
- اختر الصورة من أدوات المطور واقرأ خاصية
currentSrcمن خصائص العنصر. لا تكتف بـsrc، فهو الرابط الأساسي وقد يختار المتصفح ملفا آخر من القائمة. - كرر الاختبار على الحاسوب وقارن اسم الملف والحجم المنقول.
- إذا اختير الملف الكامل دائما، افحص وجود srcset وصحة sizes وأحجام الوسائط.
لماذا لا نكتفي بأبعاد اسم الملف؟
أبلغ المتصفح في اختبار الهاتف أن naturalWidth يساوي 358 لأن كثافة العرض والحجم الفعلي يدخلان في القرار، بينما اسم الملف يحتوي 768. لذلك قسنا currentSrc وtransferSize والعرض المرئي معا. النسخ المحفوظة في المتصفح (الكاش)، والضغط وإصدار المتصفح قد تغير الحجم المنقول، ولهذا نذكر البيئة ولا نقدم الرقم كتعهد لكل زائر.
حالات قد تمنع التوفير
- إدخال صورة HTML يدويا دون srcset.
- تعريف sizes بعرض أكبر بكثير من مساحة المقال.
- رفع صورة صغيرة أصلا؛ عندها لا توجد نسخة أكبر أو أصغر مفيدة.
- صورة خلفية في CSS، فهي لا تستخدم آلية صور المحتوى تلقائيا.
- إضافة تحسين صور تعيد كتابة الروابط أو تؤخرها بطريقة تمنع القياس المعتاد.
قرارنا للموقع
سنترك ووردبريس يولد الأحجام، ونستخدم دوال الوسائط بدل طباعة رابط الصورة الكامل في القالب، ونراجع أكبر صور المقالات بعد النشر. وإذا استبدلنا PNG بـWebP أو AVIF سنجري قياسا جديدا؛ لا نخلط أثر الصيغة مع أثر srcset في نتيجة واحدة.
تفاصيل التجربة ونتيجتها
تاريخ التجربة: 18 أغسطس 2026؛ ووردبريس: 7.0.4؛ مكان التنفيذ وأدواته: Edge Headless، الصفحة نفسها والكاش نفسه؛ الجهاز أو طريقة الفحص: 390px ثم 1440px.
الصورة تحمل srcset وloading=lazy. على الهاتف اختير ملف 768×314 ونقل 19,721 بايت. على الحاسوب اختير ملف 1024×419 ونقل 29,847 بايت.
ما الذي تثبته هذه البطاقة؟
هذه بطاقة اختبار محلي مستقل مسجل بتاريخ 19 أغسطس 2026، وليست قياسا جديدا للموقع المنشور. قرأنا بيانات مرفق المقال وsrcset الناتج وعدد الملفات المشتقة المسجلة.
هذه البطاقة تفحص الأحجام المسجلة ومرشحي srcset، لا اختيار المتصفح ولا بايتات النقل. قياس الهاتف والحاسوب في التجربة الأخرى مختلف ويجب قراءته ضمن بيئته.
