feat: Add AVIF image support to beta image plugin (#28742)

* Upgrade sharp

* Add avif support

* Add avif e2e tests

* Allow - but warn about - using just AVIF

* Add missing AVIF gql type

* Upgrade e2e test executor

Author: ascorbic

.circleci/config.yml

@@ -23,7 +23,7 @@ executors:
 aliases:
   e2e-executor: &e2e-executor
     docker:
-      - image: cypress/browsers:node10.16.0-chrome76
+      - image: cypress/browsers:node12.18.3-chrome87-ff82
 
   restore_cache: &restore_cache
     restore_cache:

e2e-tests/visual-regression/cypress/integration/image.js

@@ -3,12 +3,14 @@ const testCases = [
   ["fixed image smaller than requested size", "/images/fixed-too-big"],
   ["fluid image", "/images/fluid"],
   ["constrained image", "/images/constrained"],
+  ["avif format", "/images/avif"],
 ]
 const staticImageTestCases = [
   ["fixed image", "/static-images/fixed"],
   ["fixed image smaller than requested size", "/static-images/fixed-too-big"],
   ["fluid image", "/static-images/fluid"],
   ["constrained image", "/static-images/constrained"],
+  ["avif format", "/static-images/avif"],
 ]
 
 const sizes = [["iphone-6"], ["ipad-2"], [1027, 768]]

e2e-tests/visual-regression/cypress/snapshots/image.js/GatsbyImage -- avif format -- renders correctly on 1027x768.snap.png

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { GatsbyImage, getImage } from "gatsby-plugin-image"
+import { useStaticQuery, graphql } from "gatsby"
+import { TestWrapper } from "../../components/test-wrapper"
+import Layout from "../../components/layout"
+
+const Page = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      file(relativePath: { eq: "cornwall.jpg" }) {
+        childImageSharp {
+          gatsbyImageData(maxWidth: 1024, layout: CONSTRAINED, formats: [AVIF])
+        }
+      }
+    }
+  `)
+
+  return (
+    <Layout>
+      <h1>AVIF</h1>
+      <TestWrapper>
+        <GatsbyImage image={getImage(data.file)} alt="cornwall" />
+      </TestWrapper>
+    </Layout>
+  )
+}
+
+export default Page

e2e-tests/visual-regression/cypress/snapshots/image.js/GatsbyImage -- avif format -- renders correctly on ipad-2.snap.png

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { StaticImage } from "gatsby-plugin-image"
+import { TestWrapper } from "../../components/test-wrapper"
+import Layout from "../../components/layout"
+
+const Page = () => {
+  return (
+    <Layout>
+      <h1>AVIF</h1>
+      <TestWrapper>
+        <StaticImage
+          src="../../images/cornwall.jpg"
+          alt="cornwall"
+          formats={["avif"]}
+          maxWidth={1024}
+        />
+      </TestWrapper>
+    </Layout>
+  )
+}
+
+export default Page