صور متجاوبة

عندما تُرسَل صورة عرضها 1600 بكسل كاملة إلى جوّال لا يعرض منها إلا 400، يستهلك المستخدم من بياناته أضعاف ما يراه. والخاصية srcset تعطي المتصفح قائمة بمقاسات مختلفة للصورة نفسها، وsizes تخبره بالمساحة التي ستشغلها الصورة في الصفحة، فيختار هو المقاس الأنسب لعرض الشاشة وكثافة بكسلاتها.

والواصف 800w معناه «عرض هذا الملف 800 بكسل» وليس «اعرضه بعرض 800». ويقرأ المتصفح sizes بالترتيب ويأخذ أول شرط ينطبق، فالقيمة (min-width: 700px) 640px, 100vw معناها 640 بكسل على الشاشات العريضة، وعرض الشاشة كلّه على ما هو أضيق منها.

وانتبه إلى أن الواصف الذي لا يطابق عرض ملفّه الحقيقي يُفسد حساب المتصفح، فيختار صورة مشوّشة أو أثقل من اللازم. وإذا أردت أن يختلف قصّ الصورة بين الشاشات وليس مقاسها فقط، فهذه مهمّة <picture>.