Hi guys, has anyone faced problem with next-image optimization, while on the local environment (build as well) it works just fine (second screenshot) , by reducing the size of original image with the query (thanks to next image optimization), but on the deployed version it simly doesnt work, and loads the full sized image.

The code snippet:

 <div className="relative flex h-[50vh] w-full shrink-0 snap-start flex-col items-center justify-center lg:hidden">
                      {typeof product.preview === 'object' &&
                        product.preview.width &&
                        product.preview.height &&
                        product.preview.url &&
                        product.preview.alt && (
                          <Image
                            src={product.preview.url}
                            alt={product.preview.alt}
                            fill
                            loading='lazy'
                            sizes="(min-width: 768px) 50vw, (min-width: 1024px) 40vw, 100vw"
                            className="object-contain"
                          />
                        )}
                    </div>

next config:

const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
  images: {
    formats: ['image/avif', 'image/webp'],
    domains: ['localhost', 'noire-thomasbrnfs-projects.vercel.app'],
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '3000',
        pathname: '/api/media/file/**',
      },
      {
        protocol: 'https',
        hostname: '*.vercel.app',
        pathname: '/api/media/file/**',
        port: '',
        search: '',
      },
    ],
 
    unoptimized: false
  },
};

I've followed next guidelines.