Image optimization not kicking in on the server

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

15.7.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Thanks @leerob for pointing me here!

I recently ran into an issue where the image component image optimization is not kicking in on the “server” (vercel) but is working perfectly when running locally.

I added a (running) map image to my website (https://timoclasen.de/#running). It uses the Mapbox static image API. The API returns a png so I put the API URL in the Image component to utilize the image optimization.

Running locally it works fine – the image is served as .webp and with the right dimensions.

Runnig in production on vercel the optimization seems not to kick in and the map image is served in it’s original format as a .png and in it’s full dimension.

For all other images on the site image optimization works perfectly.

(I have added “api.mapbox.com” to my next.config.js)

Expected Behavior

I would expect to have the same behavior on the server as I have locally.

The map image should be served optimized (as .webp when supported in right dimensions).

To Reproduce

Add Mapbox static image API call to next.js image component like that:

<Image
        src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-122.337798,37.810550,9.67,0.00,0.00/1000x600@2x?access_token=pk.eyJ1IjoidGltb2Nsc24iLCJhIjoiY2traDV4YXRtMGI0ZjJucGd2bTB4bWpwOSJ9.cIQSkf21XbiK61DK_p8FEg"
        alt="static Mapbox map of the San Francisco bay area"
        width={1000}
        height={600}
      />

[jneterer]

@timoclsn @jathanasiou I have the same issue on Netlify. Locally, my image will return optimized as webp however in production it returns as its original png. My url isn’t long, no more than 250 characters, and I haven’t been able to find anything that indicates what could be wrong so far.

[timoclsn]

I found a maximum of string length of 4,096 in the Vercel docs for some things like redirects URLs. Testing seems to confirm that there is the same limit for the image component URLs on Vercel.

When I optimize the URL to be under that size image optimization works.