Image Resize Cloud .WEBP format returns Error 406

Hi

Im making af test with the Image Resize Tool from Cloudflare, but im getting this error on WEBP images

/cdn-cgi/image/width=100,quality=75,format=auto,fit=scale-down/images/banners/adidas.webp

Returns

ERROR 9408: Could not fetch the image — the server returned HTTP error 406 Not Acceptable

JPG and PNG files work fine.

Hope someone can help with this

Can you provide a link to the webp image you’re trying to use with Image Resizing please? This should work fine.

We are also experiencing this issue. MIME type is configured correctly on our Origin servers. Requesting webp images should work fine, but whenever Cloudflare Image Resizer requests a webp image, it is setting the accept header to image/jpeg,image/png,image/gif;q=0.1 regardless of whatever the accept header is in the request.

Example:
https://alexteststore.americommerce.com/cdn-cgi/image/width=100,format=auto,fit=scale-down/images/categories/categoryhero_Performance.webp

Test request with accept header = text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

I have logging enabled on our Origin server and see the request from CF image resizer comes in to fetch the original image with accept header = image/jpeg,image/png,image/gif;q=0.1

Yes this function

const imageRequest = new Request(imageURL, {
headers: request.headers
})

from my worker does not send image/webp to the origina webserver. It only sends this from a dump

image/jpeg,image/png,image/gif;q=0.1

I tried to modify the header with no luck.

It does not work cause the Accept header does not include webp image mime type to the origin server

I cant include links in my posts it says

Im on discord if we should persue this issue together. Hope others will join this issue and make Cloudflare fix it.

noerdar#2734

Its this function that dont forward the request headers

const modifiedRequest = new Request(url, {
headers: request.headers
})

Or when the Client access CF, then CF ask the Worker and the Original Accept is lost. Inside the development the Accept WEBP/IMAGE is still there.

If you print it out

console.log(request.headers.get(‘accept’));

The funny thing is that your linked worked on my iPhone

But only once, and it returned some weird square image

I dont understand this issue is not important to CF. I hope they respond soon else I have to find alternative provider for this service.

You posted this question 24 hours ago on the Community and have received responses. I wouldn’t say that it’s “not important to CF”.

If others have not commented on this issue it’s possible that it’s only occuring for you, or only your specific setup. We can try and debug further but from the small snippet you’ve shown it is very hard to get a sense of how we can reproduce this issue.

1 Like

Hi

I tried on different independent servers with IIS and its the same result when using Resize Image Server at CF. The accept header info dont include webp and therefore it throws a 406 error. Its with my own worker and with CF orignal worker /CDN-CGI/IMAGE. Also user “awhite1” are having the same issue suddenly. I have debugged it in my own Worker and its the fucntion

Reguest to the Origin server IIS

const imageRequest = new Request(imageURL, {
headers: request.headers //THIS ONLY INCLUDES the limited accept header, even if I console.log it on the dev site its correct.
})

When grabbing the orignal image at the origin server. Then the fetch function only sends image/jpeg,image/png,image/gif;q=0.1 regardless of the request header.

So the request is comming from CF with a wrong accept header.

Its like the Request Function sends its own header and not the orignal request header

Per the documentation you also need to include the cf: {image: {...}} property on the request from the Worker with any items you wish (such as format).

Inside the DEV, it Requests the webp image fine, but when its a normal browser the Request function sends the limited accept header.

Sorry I mean the Request Function to origin server, not the last fetch to CF image handler.

If someone have a simple setup where the Origin server are serving webp image files, and it works, it would be nice to see it works and what is different also when using the puclic CF worker.

Or if someone have a custom worker where it works, I could try that code.

Not sure if you saw my earlier comment, but @noerdar isn’t the only one experiencing this. As you can see from both of our earlier examples, this issue is not related to a bad request from a Cloudflare Worker. The issue occurs from both a Worker and if you just simply use the /cdn-cgi… url.

It should hopefully be simple to reproduce. Setup a webp image served from your Orgin server. Make a request to that image with a Cloudflare Image Resizer formatted url. CF hits the Origin server with the accept header of image/jpeg,image/png,image/gif;q=0.1. Seems very much like a bug on the Cloudflare side.

1 Like

Correct. I found out if I use a random image thats on the CF image servers it works fine

https://www.gamelivestory.com/thumb/web-story/images/article/5-reasons-marvels-avengers-is-the-definitive-marvel-game-5-its-ultimate-alliance-main.webp. But my own servers it fails. But stil its the CF service that sends wrong accept headers to own servers.