{f:uri.image(image: file, width: '1100', cropVariant: 'default')} 1x, {f:uri.image(image: file, width: '2200', cropVariant: 'default')} 2x {f:uri.image(image: file, width: '750', cropVariant: 'default')} {f:uri.image(image: file, width: '400', cropVariant: 'mobile')} {f:uri.image(image: file, width: '570', cropVariant: 'mobile')} {f:uri.image(image: file, width: '480', cropVariant: 'mobile')} Preload the LCP image; media ranges are mutually exclusive so only the matching source gets fetched