Payload cms vercel blob storage images throwing 400 Code: INVALID_IMAGE_OPTIMIZE_REQUEST

[candid bough]

Hi @ocean tapir. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The error 400 Code: INVALID_IMAGE_OPTIMIZE_REQUEST occurs when the image optimization request to the Next.js image API is invalid. According to the documentation, this can happen for several reasons:

• The url parameter must start with /, <http://,> or <https://.>
• The url parameter must match one of the configured remotePatterns or localPatterns in your next.config.js.
• The url parameter must have a Content-Type header that starts with image/.
• The url parameter must return a valid image response (not HTML or another type).
• The w (width) and q (quality) parameters must be valid integers and match allowed values in your config if specified.

In your case, the image URL is:

<https://example.vercel.app/_next/image?url=https%3A%2F%2Fexample.vercel.app%2Fapi%2Fmedia%2Ffile%2Fclient_one-18.png&w=96&q=75>

Possible causes based on the documentation:

1. The image URL must return a valid image response:
   If <https://example.vercel.app/api/media/file/client_one-18.png> does not return an image with a Content-Type header starting with image/, the optimization will fail with this error.

2. The image URL must match allowed patterns:
   If you are using a remote URL (even if it's your own domain), you must ensure that your next.config.js includes a remotePatterns entry that matches <https://example.vercel.app/api/media/file/**.>

3. The image endpoint must be publicly accessible:
   If the API route is protected or requires authentication, the image optimizer cannot fetch the image.

Troubleshooting steps:

• Visit <https://example.vercel.app/api/media/file/client_one-18.png> directly in your browser. If it does not display the image or downloads as a non-image file, check your Payload CMS and storage configuration to ensure the correct Content-Type is set and the file is accessible.

• Check your next.config.js and ensure you have something like:

  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.vercel.app',
        pathname: '/api/media/file/**',
      },
    ],
  }
  

• Make sure the API route returns the image with the correct headers (Content-Type: image/png for PNG files).

For more details, see the official documentation on this error: INVALID_IMAGE_OPTIMIZE_REQUEST.

If you follow these steps and the error persists, double-check that the image endpoint is not returning an error page (like a 404 or HTML response), as this will also trigger the error you are seeing.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@ocean tapir Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[ocean tapir]

@candid bough directly loading https://example.vercel.app/api/media/file/client_one-18.png loads just fine and if i add the &w=96&q=75 it shows 404

[candid bough]

Let me check the knowledge base for you again. Give me one moment! :books:

---

If loading <https://example.vercel.app/api/media/file/client_one-18.png> directly works, but accessing it through the Next.js image optimizer (/_next/image?url=...&w=96&q=75) returns a 400 error, the issue is likely with the configuration of the Next.js image optimizer or the response from your API route.

According to the official documentation, the INVALID_IMAGE_OPTIMIZE_REQUEST error can occur if:

• The url parameter does not match the allowed remotePatterns or localPatterns in your next.config.js.
• The response from the image URL does not have a Content-Type header that starts with image/.
• The image endpoint returns a non-image response (such as HTML or a 404 error) when accessed by the optimizer, even if it works in the browser.
• The width (w) or quality (q) parameters are not valid or not allowed by your configuration.

Key points to check:

1. remotePatterns Configuration
   Ensure your next.config.js includes a remotePatterns entry that matches your API route:

   module.exports = {
     images: {
       remotePatterns: [
         {
           protocol: 'https',
           hostname: 'example.vercel.app',
           pathname: '/api/media/file/**',
         },
       ],
     },
   }
   

   This is required for the optimizer to allow fetching images from your API route see docs.

2. API Route Response
   The API route must return the image with a Content-Type header that starts with image/ (e.g., image/png). If the optimizer receives a 404 or a non-image response, it will throw this error see docs.

3. Direct URL Testing
   Adding &w=96&q=75 to the direct image URL (e.g., <https://example.vercel.app/api/media/file/client_one-18.png&w=96&q=75>) will not work, because your API route does not expect or handle these query parameters. The optimizer uses these parameters internally, but your API route should ignore or safely handle unknown query parameters.

4. Image URL in Optimizer
   The correct way to use the optimizer is via the Next.js <Image /> component, not by manually appending w and q to your API route. The optimizer will call your API route with the correct parameters.

Summary:

• Make sure your next.config.js allows the API route as a remote image source.
• Ensure your API route always returns a valid image with the correct headers, regardless of extra query parameters.
• Do not expect your API route to handle w and q—these are for the optimizer, not your API.

If all of the above are correct and you still see the error, double-check that the image URL in the optimizer matches the allowed pattern and that your API route does not return a 404 or non-image response when accessed with extra query parameters see docs.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: