The Problem

When loading images via the next/image component, they are all resized by the Next.js server. The image path is rendered as:

<img src="https://www.markkulab.com/_next/image?url=https://content.markkulab.com//Images/en-US/Lobby/same_day_rdy_next_01.png&w=1920&q=75"/>

System Impact

• Performance overhead on the Next.js server
• Oversized Docker images

I looked at NZXT's website; they also use Next.js and likely use next/image to load images. Because they use Imgix's image resizing service, they don't encounter this problem.

Checking the Next.js official documentation, I found that the next/image loader can be customized.

images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

Possible Solutions

• Enable Cloudflare Image Optimization link
• Purchase an Imgix plan ($300 USD / month)
• Self-host an image loader, e.g., Uploadcare or...
• Stop using next/image and write a custom image component that uses a resizing service like Cloudflare => Not recommended, as it's too much hassle.