A srcset attribútum lehetővé teszi, hogy egy képből többféle felbontás közül a böngésző a saját képernyőjéhez illőt válassza ki automatikusan. A sizes paraméter adja meg, milyen szélességű helyet foglal a kép különböző viewport-méreteknél a layoutban. A mobiltelefon tipikusan 400px-es verziót tölt, miközben a desktop 1600px-es változatot kap a megfelelő élességhez. A picture tag még tovább megy: egyszerre több formátumot, például AVIF, WebP és JPG kínál fel a böngészőnek. Az art direction technikával eltérő képkivágás is megadható mobilra és desktopra külön. A jól implementált srcset 40-60 százalékkal csökkenti a mobil adatforgalmat látogatónként. A Core Web Vitals LCP értéke látványosan javul ennek hatására azonnal.
Blog
