How to tell what image format a visitor is being served?

[wildpow]

How do I tell which image format is being served when someone visits my site? I thought the easiest way was to right-click on the image and save it but, I'm not sure anymore. Because when I do this in Chrome I get JPEG and when I do this in Firefox I get WebP.

(The only reason I opened this was at one time I was able to do this Chrome and get WebP image if available but, I wasn't sure when or what changed this functionality. I originally thought this was a Gatsby v3 and gatsby-plugin-image issue but, the results are the same hence why I have two links to reproduce this with. I've also tested Chome 90 on windows.)

Steps to reproduce

Open one of these URLs in both Chrome and Firefox, right-click on the first image and download it.
Gatsby v2 and Gatsby v3

Expected result

I would think whatever you save is what you are being served.

Actual result

Gets different file formats in different browsers

Environment

Gatsby Version 2 site

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 15.13.0 - /usr/local/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 7.7.6 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 91.0.4472.77
Firefox: 88.0.1
Safari: 14.1
npmPackages:
gatsby: ^2.15.28 => 2.32.3
gatsby-image: ^2.2.23 => 2.11.0
gatsby-plugin-algolia: ^0.16.2 => 0.16.3
gatsby-plugin-canonical-urls: ^2.3.10 => 2.10.0
gatsby-plugin-catch-links: ^2.3.11 => 2.10.0
gatsby-plugin-google-analytics: ^2.1.35 => 2.11.0
gatsby-plugin-manifest: ^2.2.41 => 2.12.0
gatsby-plugin-netlify: ^2.1.32 => 2.11.0
gatsby-plugin-react-helmet: ^3.1.22 => 3.10.0
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
gatsby-plugin-robots-txt: ^1.5.1 => 1.5.5
gatsby-plugin-sharp: ^2.4.5 => 2.14.1
gatsby-plugin-sitemap: ^2.2.27 => 2.12.0
gatsby-plugin-styled-components: ^3.1.19 => 3.10.0
gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.8 => 1.1.18
gatsby-remark-images-datocms: ^0.1.0 => 0.1.0
gatsby-source-apiserver: 2.1.5 => 2.1.5
gatsby-source-datocms: ^2.3.0 => 2.5.10
gatsby-source-filesystem: ^2.1.48 => 2.11.0
gatsby-source-shopify: ^3.2.1 => 3.10.0
gatsby-transformer-remark: ^2.8.28 => 2.16.0
gatsby-transformer-sharp: ^2.3.14 => 2.12.0
npmGlobalPackages:
gatsby-cli: 3.6.0

Gatsby Version 3 site

npmPackages:
gatsby: ^3.5.1 => 3.6.1
gatsby-plugin-algolia: ^0.20.0 => 0.20.0
gatsby-plugin-canonical-urls: ^3.5.0 => 3.6.0
gatsby-plugin-catch-links: ^3.5.0 => 3.6.0
gatsby-plugin-google-analytics: ^3.5.0 => 3.6.0
gatsby-plugin-image: ^1.5.0 => 1.6.0
gatsby-plugin-manifest: ^3.5.0 => 3.6.0
gatsby-plugin-netlify: ^3.6.1 => 3.6.1
gatsby-plugin-react-helmet: ^4.5.0 => 4.6.0
gatsby-plugin-react-svg: ^3.0.1 => 3.0.1
gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
gatsby-plugin-robots-txt: 1.5.6 => 1.5.6
gatsby-plugin-sharp: ^3.5.0 => 3.6.0
gatsby-plugin-sitemap: ^4.1.0 => 4.2.0
gatsby-plugin-styled-components: ^4.5.0 => 4.6.0
gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.22 => 1.1.22
gatsby-remark-images-datocms: ^0.1.2 => 0.1.2
gatsby-source-apiserver: ^2.1.8 => 2.1.8
gatsby-source-datocms: ^2.6.15 => 2.6.15
gatsby-source-filesystem: ^3.5.0 => 3.6.0
gatsby-source-shopify: ^5.0.0-rc.24 => 5.0.0-rc.24
gatsby-transformer-remark: ^4.2.0 => 4.3.0
gatsby-transformer-sharp: ^3.5.0 => 3.6.0
npmGlobalPackages:
gatsby-cli: 3.6.0

[wildpow]

Well, now I'm more confused. I thought this is a source plug-in issue so I created a test repo/site to test DatoCMS and Contentful side by side.
In Chrome right-click saves WebP for Contentful and JPEG for DatoCMS. Ok so it's a source plug-in issue
In Firefox both are saved as WebP. So it's a Chrome thing?

Test site
Test Repo

Info Clipboard for the test repo

 System:
   OS: macOS 10.15.7
   CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
   Shell: 5.7.1 - /bin/zsh
 Binaries:
   Node: 15.13.0 - /usr/local/bin/node
   Yarn: 1.22.5 - /usr/local/bin/yarn
   npm: 7.7.6 - /usr/local/bin/npm
 Languages:
   Python: 2.7.16 - /usr/bin/python
 Browsers:
   Chrome: 91.0.4472.77
   Firefox: 88.0.1
   Safari: 14.1
 npmPackages:
   gatsby: ^3.4.0 => 3.6.1
   gatsby-plugin-image: ^1.4.0 => 1.6.0
   gatsby-plugin-manifest: ^3.4.0 => 3.6.0
   gatsby-plugin-react-helmet: ^4.4.0 => 4.6.0
   gatsby-plugin-sharp: ^3.4.0 => 3.6.0
   gatsby-plugin-sitemap: ^4.0.0 => 4.2.0
   gatsby-source-contentful: ^5.6.0 => 5.6.0
   gatsby-source-datocms: ^2.6.15 => 2.6.15
   gatsby-source-filesystem: ^3.4.0 => 3.6.0
   gatsby-transformer-sharp: ^3.4.0 => 3.6.0
 npmGlobalPackages:
   gatsby-cli: 3.6.0

[wildpow]

I tested a bunch of browsers on different machines I had available supplementing missing configurations with BrowserStack. Chrome 83, 84, 85, 86, and 87 save as WepP. 88 and above save as JPEG. So something changed in Chrome that only affects images from Dato?!?

[wildpow]

I believe this is an issue with Imgix auto
and how Chrome 88 and above handle it.

A few examples I've found that use auto serving original format shows that this issue is framework independent.
Gatsby Snipcart Demo
Hugo portfolio
Nextjs events