I have this in my next.config.js:

/**
 * @type {import('next').NextConfig}
 */

const nextConfig = {
  reactStrictMode: true,
  distDir: ".next",
  output: 'standalone',
  images: {
    formats: ['image/webp','image/avif'], // Reihenfolge = Präferenz
  },
};

module.exports = nextConfig;

This should generate WebP and AVIF Images for Browser which support those File-Formats.
But I found that this doesn't work at all.

I've made sure, that the Image is insert via <Image>-Tag:

hdiv className="relative">
                    <Image
                      className="mx-auto mb-14"
                      src={banner.image}
                      width={750}
                      height={390}
                      priority
                      fetchPriority="high"
                      sizes="(max-width: 640px) 100vw,
                             (max-width: 1024px) 80vw,
                             50vw"
                      style={{
                        maxWidth: "90%",
                        height: "auto",
                        border: "2px solid #fff",
                        borderRadius: "16px",
                        boxShadow: "0 12px 40px rgba(0,0,0,0.15)"
                      }}/>

                  </div>

But after Deploy, the image is still delivered as jpeg (see image 1)
Any Idea why?