صور متجاوبة

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

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

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