Repeated Image Optimization Causing Unhandled Expense in Vercel

[quezadaesteban]

Hey guys, first of fall, amazing job in this UI. I hosted the project in Vercel. After a few minutes of playing around with it, I found I was being charged $15+ in Image Optimization spend. I quickly disabled the image optimization for the whole project to stop the bleeding.

This is a screenshot of the logs in the Vercel console.

And the amout of image optimizations done within that day.

Do you guys know what could be causing the issue and how could it be addressed? The only thing I changed from the original repo is increasing the serverless function execution time.

Thanks.

[quezadaesteban]

Update

Actually, disabling image optimization did not solve the issue. What did it was removing the profile picture I set in the app. I did it because I noticed all the image optimization calls where from a resource in .supabase.co/storage/v1/object/public/profile_images/.

[luighifeodrippe]

This simple line of code will solve the problem: unoptimized: true

or

Update your next.config.js to the following code:

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true"
})

const withPWA = require("next-pwa")({
  dest: "public"
})

module.exports = withBundleAnalyzer(
  withPWA({
    reactStrictMode: true,
    images: {
      unoptimized: true,
      remotePatterns: [
        {
          protocol: "http",
          hostname: "localhost"
        },
        {
          protocol: "http",
          hostname: "127.0.0.1"
        },
        {
          protocol: "https",
          hostname: "**"
        }
      ]
    },
    experimental: {
      serverComponentsExternalPackages: ["sharp", "onnxruntime-node"]
    }
  })
)

[AdiRishi]

This was a really great callout! I almost got hit with the same thing, this issue saved me some $.

[quezadaesteban]

@luighifeodrippe, I did it as seen here but it did not address the issue

After the change, the UI was still triggering calls to the image optimization endpoint. I bring the issue mainly because this can happen to anyone using the default project, and it seems it should be straightforward to address without disabling image optimization, as Vercel is "optimizing" the same resource over and over because the application is fetching it with a unique ID at the end as shown here:

I'll take a look at the source code in the following weeks.

[thomastay]

I hit this issue too. It happens because in the profile setting page, they fetch the image URL with this line:

src={profile.image_url + "?" + new Date().getTime()}

The new Date().getTime() is a cachebusting technique to get the latest image URL. While nice, I don't think it's really needed, since the image_url would change if the image changes anyway.

Thus if a user accidentally leaves the profile-settings page open, it will cause a repeated sequence of fetches to the image endpoint which cannot be cached by the browser

[thomastay]

relevant commit https://github.com/mckaywrigley/chatbot-ui/commit/10e666b0ed8d43b699e3d47a7d0388e02318b26f