Image component not optimizing images to webp

Question

I'm using the Next's Image component to auto optimize images. I have the following config  images: {
    deviceSizes: [640, 750, 828, 1024, 1280, 1440, 1920, 2048, 3840],
    formats: ['image/webp'],
  },And an image looks like this<Image
      src={image.url!} // image is self hosted under /api/media/
      alt={image.alt}
      width={image.width!}
      height={image.height!}
      placeholder="blur"
      blurDataURL={image.sizes!.loading!.url!}
      sizes={sizes}
      className={`h-full w-auto object-contain ${className}`}
      style={style}
/>But when requesting an image I get the original jpeg file instead of an optimized webp. The browser is accepting webp files Accept: image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5 but it returns Content-Type: image/jpeg

Masai Lion · Accepted Answer

I managed to figure it out. For anyone that might come across this in the future, I created the app with npx create-payload-app which installed an older version of sharp (The library that next uses for image optimization) and caused next to fail silently. I just updated it and it works just fine!

Image component not optimizing images to webp

1 Reply