Not sure if this is a source plugin issue or a Chrome issue

[wildpow]

When I right-click on an image and save it. That image should be whatever is being displayed to the user, right? Well using gatsby-source-datocms images saved are the original file format but, when I use let's say Contentful I get WebP images. I made a reproduction site/repo to show you what I'm talking about.

Site Repo Issue #31644

  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 figured this is a source plug-in issue because formats is not a resolver option with Dato and it is with Contentful but, the confusing thing is if you do this test with Firefox it saves both images as WebP....

ContentFul

Dato

Also the GraphiQL query doesn't mention WebP in the Dato results

[stefanoverna]

That's because we always add the ?auto=format option (see https://docs.imgix.com/apis/rendering/auto/auto) in each image URL! This means you don't have to specify an explicit format: each visitor will get a webp if its browser supports it, or fall back to the original format otherwise!

[wildpow]

@stefanoverna thanks for the quick reply. I guess my question is now how do I know my users are getting WebP if and when their browsers support it? Because in the past I would save the image off the page to verify the format but something changed either in chrome or this source plug-in were this method doesn't work anymore.

[stefanoverna]

Well, since some users will be getting webps and other jpgs/pngs, to reproduce the conditions of a particular user you need to know which browser they are using (and possibly the browser version number!)

[wildpow]

@stefanoverna I've tested a few configurations by trying to save one of the images from example site using BrowserStack and a few machines I have available. Should I assume the last 3 versions of Chrome, Safari (latest), Opera on MacOS (10.15.7) and Windows 10 (21H1) only display JPEG from DatoCMS or is my testing methodology incorrect?

DatoCMS Image

MacOS (10.15.7) --- Chrome 89, 90, 91 = JPEG MacOS (10.14.6) --- Chrome 88, 89 , 90 = JPEG MacOS (13.6) --- Chrome 88, 89, 90 = JPEG MacOS (10.15.7) --- Safari 14.1 = JPEG MacOS (10.15.7) --- Opera 76 = JPEG MacOS (10.15.7) --- Firefox 87, 88.01 = WebP

Windows 10 (21H1)--- Chrome 89, 90, 91 = JPEG Windows 10 (21H1) --- Chrome 88, 89 , 90 = JPEG Windows 10 (21H1)--- Chrome 88, 89, 90 = JPEG Windows 10 (21H1) --- Safari 14.1 = JPEG Windows 10 (21H1) --- Opera 76 = JPEG Windows 10 (21H1) --- Firefox 87, 88.01 = WebP

Contentful Image

MacOS (10.15.7) --- Chrome 89, 90, 91 = WebP MacOS (10.14.6) --- Chrome 88, 89 , 90 = WebP MacOS (13.6) --- Chrome 88, 89, 90 = WebP MacOS (10.15.7) --- Safari 14.1 = WebP MacOS (10.15.7) --- Opera 76 = WebP MacOS (10.15.7) --- Firefox 87, 88.01 = WebP

Windows 10 (21H1)--- Chrome 89, 90, 91 = WebP Windows 10 (21H1) --- Chrome 88, 89 , 90 = WebP Windows 10 (21H1)--- Chrome 88, 89, 90 = WebP Windows 10 (21H1) --- Safari 14.1 = WebP Windows 10 (21H1) --- Opera 76 = WebP Windows 10 (21H1) --- Firefox 87, 88.01 = WebP

[wildpow]

Well, this is weird. 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. I'll post an issue with them. Since most of my visitors are using newer versions of Chrome do you have any ideas on how I could get WebP working until this is fixed?

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

[stefanoverna]

I'm using Chrome version 90.0.4430.212 (Official Build) (x86_64), and everything seems to work properly (content-type: image/webp)

[wildpow]

Thank you, I just needed a new workflow to check WebP images. I'll close my other issues and start using the network tab instead of manually saving.