Guide
Images return 400: INVALID_IMAGE_OPTIMIZE_REQUEST
Updated
Your images fail with a 400 Bad Request and the error INVALID_IMAGE_OPTIMIZE_REQUEST. Vercel says this error occurs when the query string uses an invalid value for q (quality) or w (width), or when url breaks the rules in its docs, for example by returning a non-image response. This guide applies to Next.js apps hosted on Vercel, including apps made with AI app builders that deploy there.
Fixed in your code, then tested live. Check my app free
Why it happens
When an image goes through Vercel's image optimization, Vercel checks the q, w and url values in the request against your configuration. It also checks that the source URL matches the allowed patterns (remotePatterns or localPatterns). If a value is invalid, or the source does not return an image, the request is rejected with this error.
Possible causes
- The url parameter does not match any remotePatterns or localPatterns set in next.config.js.
- The url parameter does not start with /, http:// or https://.
- The source image does not return a Content-Type header that starts with image/.
- The q value is not an integer between 1 and 100, or does not match one listed in qualities.
- The w value is not an integer, or does not match one listed in deviceSizes or imageSizes.
- The image response body is larger than the size limit, so it is not optimized.
Official fix steps
- Check for typos in the parameter names and values in the image request. (vercel.com)
- Review the request URL to confirm it is correctly formatted and includes the required parameters. (vercel.com)
- Make sure the q value is an integer from 1 to 100 and matches one in qualities if that is defined. (vercel.com)
- Make sure the w value is an integer that matches one in deviceSizes or imageSizes in next.config.js. (vercel.com)
- Make sure the url starts with /, http:// or https:// and matches a configured remotePatterns or localPatterns entry. (vercel.com)
- Make sure the image response has a Content-Type header starting with image/ and a body under 300 MB (under 100 MB on the hobby plan). (vercel.com)
- Set remotePatterns with the hostname of the images you want to optimize in next.config.ts. (vercel.com)
- Run next dev locally to reproduce the error and get more details. (vercel.com)
You can't see it yourself
You're signed in, your customers aren't. Each visitor's browser sends its own image requests to your published app, and a rejected request returns a 400 for that visitor. What you see in your own browser may not match what your customers see.
What to do next
App broke after you published it? Our AI agent fixes it in your code, then tests your live app again so you see the result yourself. The first check is free.
Fixed in your code, then tested live. Check my app free
Related: Supabase Storage images not loading on your live app · v0: environment variables missing on the published app · Works in the preview but not after publishing
Sources
VibeFix's free check can show this on your live app: our AI agent tries your live app like a new user and shows you what breaks. On request, it reviews your code independently (VibeFix isn't part of any app builder), fixes it in your code and re-checks it live.
Last checked: 5 November 2026, against the sources listed above.
VibeFix is independent. Lovable, Bolt, Replit, Base44, v0 and Supabase are trademarks of their owners.
Want it fixed?
Our AI agent fixes it in your code and tests your live app again. See pricing.
It starts with a free check that confirms the problem on your live app, no account needed.