[gatsby-remark-images] with withAvif return wrong "srcSetType" for generated Avif images

[hendra-go]

Description

[gatsby-remark-images] with withAvif return wrong "srcSetType" for generated Avif images

Steps to reproduce

Develop any gatsby project using gatsby-remark-images with withAvif set to true in gatsby-config.js

Expected result

The image type should be image/avif
Image loaded and displayed in all browser that support avif

Actual result

The currently image type is image/jpeg
and image not shown in mobile browser (tested with latest chrome for android) even though the browser support avif, but apparently still shown in desktop browser that support avif

Environment

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 14.15.5 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Local\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.2 - /cygdrive/c/Python39/python
  Browsers:
    Chrome: 88.0.4324.190
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.74)
...

[hendra-go]

The culprit actually lies in gatsby-plugin-sharp.

I have created pull request for quick fix

PR #29758

And i have confirmed that avif image now shown in mobile browser

[hendra-go]

Additional:
If you use your own http server pleas,e add image/avif to your mime types if not exist