Next.js 图像组件未在 Vercel 生产/服务器中进行优化

Question

复制存储库：https://github.com/Dince-afk/reproductive-app

我使用 Next.js v15 应用程序路由器和最小的设置。

import Image from "next/image";

import exampleImage from "@/app/3.jpeg";

export default function Home() {
  return (
    <div>
      <Image src={exampleImage} alt="Ts" width={400} height={600} />
    </div>
  );
}

在本地开发服务器中，它按我的预期工作。它返回的图像文件为 webp，只有 300 kb，而不是原始的 2.7 mb。

但推送到 Vercel 服务器时，它确实返回图像文件，但明显优化为零：原始 2.7 mb 和 jpeg。这不应该发生，是吗？

它确实返回 Next.js 优化查找 URL：

_next/image?url=%2F_next%2Fstatic%2Fmedia%3.ae47efbf.jpeg&w=3840&q=75

修改 URL（例如更改 q=1）没有任何作用。仍然返回同一个未优化的图像文件。

这是怎么回事？我是否误解了 Next.js Image 的工作原理？

Answer 1

我发现我的案例出了什么问题。

我最初有一个约 70 mb 且分辨率极高的巨大图像文件。我不是图像专家。所以我所做的就是压缩，然后一遍又一遍地重新压缩文件，直到它达到 7 mb。

我没有做的是“调整大小”。所以图像文件的维度元数据仍然是巨大的。显然 Nextjs Image API 内存不足，只返回了未优化的图像。

使用工具调整大小后，它起作用了。