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

[LekoArts]

I think you're right in the sense that this is an upstream issue out of our control. I visited your site on Windows/Chrome 90 and for me it saves it as a WebP

[wildpow]

I started checking the size savings of WebP images by manually saving them because I've come crossed instances of the WebP being bigger than the original image. When that stopped working for me I was concerned my users were only getting JPEGs but, I just needed to change my workflow and start using the network tab of the Chrome dev tool instead.

[wildpow]

@LekoArts Do you have a program that can view WebP images installed on the computer you tested this on?

My new theory is Chrome is trying to be clever by downloading the format that your computer can view with installed programs not what's being served like Chrome 87 and below did. Both computers I tested on don't have a WebP viewer.

[wardpeet]

@wildpow what's the use case here? Do you want people to download the image? To see which image gets downloaded you can do the following:

1. Open up devtools
2. select the <img /> tag
3. run $0.currentSrc in devtools console