Massive overconsumtion of image optimization for profile_images

[siavashvj]

Our stage env for this on Vercel warned that we've used up our 5000 image optimization processes for the month despite only having 2 test users with very little activity. Checking further, it seems over 5000 image optimizations of one single profile image, over and over again.

Here's a snippet from the 5000 line long log of optimized images; all leads to the same image.

https://wknkltrrrcizptgescrh.supabase.co/storage/v1/object/public/profile_images/0e1246da-8197-4913-b04b-872ae8a708eb/1706648082867?1706648755204
https://wknkltrrrcizptgescrh.supabase.co/storage/v1/object/public/profile_images/0e1246da-8197-4913-b04b-872ae8a708eb/1706648082867?1706648755353
https://wknkltrrrcizptgescrh.supabase.co/storage/v1/object/public/profile_images/0e1246da-8197-4913-b04b-872ae8a708eb/1706648082867?1706648755464
https://wknkltrrrcizptgescrh.supabase.co/storage/v1/object/public/profile_images/0e1246da-8197-4913-b04b-872ae8a708eb/1706648082867?1706648755569
https://wknkltrrrcizptgescrh.supabase.co/storage/v1/object/public/profile_images/0e1246da-8197-4913-b04b-872ae8a708eb/1706648082867?1706648755655
https://wknkltrrrcizptgescrh.supabase.co/storage/v1/object/public/profile_images/0e1246da-8197-4913-b04b-872ae8a708eb/1706648082867?1706648755875

[mckaywrigley]

I'll have to dig in here.

If anyone has any ideas on fixes please let me know!

[KyleRobertsAI]

Hi,

You can disable them either on a per image basis by passing the 'unoptimized' prop to the Image tag.

Or completely disable optimisations by adding the below to the next.config.js file:

module.exports = {
  images: {
    unoptimized: true,
  },
};

Information found here: https://vercel.com/docs/image-optimization/managing-image-optimization-costs

[stasilo]

I believe this is due to the (I suspect) cache bust query param in the image src in profile-settings.tsx: src={profile.image_url + "?" + new Date().getTime()}

This is a suggested optimisation in the Vercel docs (https://vercel.com/docs/image-optimization/managing-image-optimization-costs):

"To reduce your Image Optimization usage, you should consider the following:

Reduce variability in query string parameters for src prop and minimize the amount of times you change the src property during a billing period"

I'm guessing this particular issue will disappear if that query param is removed, but I suspect @mckaywrigley hade a reason for adding this to fix another issue, perhaps? :)

[ScrogBot]

I got a congrats letter on using up all imaging processing. Just with a few avatar icons.

[Gerosullivan]

I got a congrats letter on using up all imaging processing. Just with a few avatar icons.

Me too. And a $50 charge!