I have a next.js project that I’ve deployed on vercel, linked to my github account. I was looking at my image optimization count under the usage page. When clicking on the image optimization screen specifically, the page where there is a large graph of all the images that were optimized, the little gray count to the bottom right of the graph kept increasing without end. I captured a screen record of it going up and up. My project certainly doesn’t have more than a quadrillion optimized images, lol.
Hi @knox-dude. Usage is based on the number of unique source images, so you’ll want to make sure you reduce variability in the query string parameters, minimize the amount of times your change the src prop, and be as specific as possible with remotePatterns values.
You can find more tips and details in the Image Optimization docs:
Hi Amy, thank you for responding. I’m aware of ways to limit my image optimization. I was bringing this up because of the bug that you can see in my screenshots. Would you mind re-reading the post? I describe it in detail up there, but basically, the image count on the bottom right keeps increasing even though it shouldn’t; it also saps cpu processing power. Please let me know if I should create a new issue on GitHub - vercel/vercel: Develop. Preview. Ship. - thank you.
Sorry, I didn’t explain my logic clearly! I understand your problem to be a fast growing optimized image count that exceeds the actual number of images explicitly included in the project.
The most common scenario have seen causing that problem is when the same image is counted as multiple source images due to differences in the src value, such as with a remote image path that includes a variable query param. In those cases, you can use the unoptimized prop to disable optimization images on an individual basis.
The Usage tab can give you a list of optimized images which can help you identify the images contributing to high usage. If you can share a minimal reproducible example or some code snippets from your project, that would give me a better idea of what is going wrong in your case.
Hi Amy, thank you for your feedback. Firstly, this isn’t an issue with my code, but rather the usage reporting screen on vercel.com. I believe this is a frontend bug with Vercel’s website. I was able to create a minimal reproducible example, with a video to follow along with what happens.
Here is the github repo for the minimal reproducible example I made.
I’ve created a short video where I screen record what happened, please take a look.
Here’s the steps I took, and how to recreate the error:
- Created a blank github/vercel project based on the next.js template.
- Added a single image so that Vercel would count a single image optimization.
- After the site was built, I went to my usage. I specifically went to the image optimization section.
- Here’s where I noticed the bug - when hovering over the bar chart, the number of image optimizations started increasing without end. Also, chrome started heavily using my CPU resources, and stopped using CPU resources when I closed the tab.
I’m a junior developer interested in making open source contributions. I know vercel has a github page, but I am not sure if the web dashboard is open-source or not. If it is, I’d love to try investigating this bug.
Thank you for the repo and the video. Perfect illustration of the issue. Great work uncovering this strange UI behavior!
The dashboard isn’t open source, but I’m sharing your report with site team so we can get this fixed.
The team just released a change to fix this issue. Thanks again for reporting it!
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.