I've fixed it like this now btw, by ditching optimization and just using the simple CSS background-image property in the hero section:

<div
        className='flex z-[1] flex-col lg:gap-[52px] pt-[30px] lg:pt-[104px] pb-[52px] lg:px-[284px] px-4'
        style={{
          backgroundImage: "url(/landing-pages/blue-tiled-background.svg)",
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center center",
          backgroundSize: "cover"
        }}
      >