Poor JPEG images received at monitor.firefox.com when visitng with WebP accept header stripped

[FOSSPCM]

Description

When visiting https://monitor.firefox.com/ with the browser set to asking the server not to send WebP images, instead causes the server to send very poor JPEG images to replace them, so bad that even the very logo for Firefox Monitor just shows a black rectangle with the Monitor graphic very noisy.

Steps to reproduce

One way this can be reproduced:

1. In Firefox, open "about:config."
2. Set image.http.accept to /
3. Open a new tab or window and visit https://monitor.firefox.com/

Other ways include setting image.webp.enabled to false, or installing an addon like "Don't "Accept" image/webp" by jscher2000 and setting it to Strip image/webp.

Refreshing the tab/window will not cause the server to reflect your header changes. Close the tab/window, open a new one, and visit the site again.

Expected result

This is the original with WebP images served. URL: https://monitor.firefox.com/

Actual result

Notice the faulty JPEG images when WebP is removed from the image accept header. URL: https://monitor.firefox.com/

Environment

Tested in Firefox 117.0.1 on both Windows 10 and Window 11. I normally have the image.http.accept header in about:config set to */* for myself.

For the record, the reason why I have Firefox set up to do this is because I like to save images I like or otherwise want or need in their original form, rather than be served a WebP file. This becomes problematic as WebP is not suitable format that works in most software, and sometimes servers will compress a JPEG as a WebP, and converting it back to JPEG adds additional quality loss. WebP may have also degraded the quality in what would otherwise be PNG files as well. Simply converting WebP images to something else is not a viable option for me. However, I do not have a problem with WebP if the original file was a WebP. I only have a problem when the original file is re-compressed into WebP. Now you know.

Possible solutions

A. Use PNG as a fallback image format to serve instead of JPEG. B. Exclusively serve WebP. Even with the methods used to ask the server not to serve WebP, if WebP was the only option, or is the original image, a WebP file may be served anyway.

[Vinnl]

Thanks for reporting. Looks like this is an upstream bug: https://github.com/vercel/next.js/issues/35674

Presumably, a workaround would be for us to use a ~~JPEG~~ PNG image and let Next.js convert that to WebP, rather than vice versa.

[FOSSPCM]

I'd use PNG if I were in your shoes, rather than JPEG. You get to preserve the quality of the graphic, along with the transparency. You could also just serve the WebP images alone, as I mentioned in my original post; and don't do any sort of conversion. Every modern web browser these days support it.

Just throwing in my two cents, that's all. Nothing against JPEG, just thinking for this use case, PNG might be better.