Responsive képek: a srcset és sizes attribútum összehangolása

A responsive kép a látogató eszközmérete szerint a legkisebb megfelelő verziót tölti le automatikusan, sávszélességet spórolva minden megnyitásnál. A srcset attribútum több képforrást ad meg w deszkriptorral, amely a kép pixel-szélességét jelzi pontosan a böngészőnek. A sizes attribútum CSS media query-szerű feltételekkel írja le, milyen szélesen jelenik meg az adott viewporton az adott kép pontosan. A böngésző ezek alapján kiszámolja, melyik verziót töltse le a látogatónak a kapott sávszélességen. A picture elem további source elemekkel art direction célokra is használható, például mobilon másfajta kompozícióra a kis képernyőre. A jól beállított srcset átlagosan 40-50 százalék adat-megtakarítást ad mobilon, ami közvetlen LCP javulást eredményez minden látogatónál mindenhol.