Replication Repo:

I use Next.js v15 app router and a minimal setup.

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>
  );
}

In the dev server locally it works as I expect it. It returns the image file as webp and only weighing 300 kb instead of the original 2.7 mb.

But pushed to the Vercel server it does return the image file, but with zero apparent optimization: original 2.7 mb and jpeg. This shouldn't happen, yes?

It does return a Next.js optimization looking URL:

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

Playing around with the URL (changing q=1 for example) does nothing. Still returns the one same unoptimized image file.

What is going on here? Am I misunderstanding the workings of Next.js Image?

Replication Repo: https://github/Dince-afk/reproduction-app

I use Next.js v15 app router and a minimal setup.

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>
  );
}

In the dev server locally it works as I expect it. It returns the image file as webp and only weighing 300 kb instead of the original 2.7 mb.

But pushed to the Vercel server it does return the image file, but with zero apparent optimization: original 2.7 mb and jpeg. This shouldn't happen, yes?

It does return a Next.js optimization looking URL:

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

Playing around with the URL (changing q=1 for example) does nothing. Still returns the one same unoptimized image file.

What is going on here? Am I misunderstanding the workings of Next.js Image?

• image
• next.js

Share Improve this question Follow edited Nov 16, 2024 at 21:00 Dince-afk asked Nov 16, 2024 at 0:25 Dince-afkDince-afk 23222 silver badges99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I found out what the problem was in my case.

I initially had a gigantic image file of around 70 mb with a gigantic resolution. I'm no image expert. So what I did was compress, and re-compress the file over and over again until it got to 7 mb.

What I didn't do was "resize" it. So the dimension metadata of the image file was still saying its gigantic. And apparently Nextjs Image API went out of memory and just returned the unoptimized image.

After using a tool to resize it it worked.