Hi, I'm working on optimizing the images on my site. Managed to already drastically improve the images through lighthouse, but still not fully satisfied. I'm still able to save a bit on the image sizes (Potential savings of 163 KiB), but like I just do not understand it how I'd ever calculate it as it's pretty much just dynamic.

I think I used some tool to calculate it automatically, any tips on how I would go about doing this?

import banner_img from '@/public/images/destinations/la-douane/IMG_3939.jpg';

// ...

<section className="relative w-full max-w-4xl flex flex-col mx-auto h-72 mt-6 mb-36">
      <Image
        priority
        placeholder="blur"
        blurDataURL="/images/destinations/la-douane/IMG_3939.jpg"
        src={banner_img}
        sizes="(min-width: 1020px) 896px, calc(94.57vw - 50px)"
        fill
        loading="eager"
        className="rounded-lg md:rounded-xl border-2 border-border sm:border-none object-cover object-bottom shadow-lg shadow-primary/30 dark:shadow-primary-foreground/30"
        alt={dict.image_alt}
      />
    {/* ... */}
</section>