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

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

@@ -11,6 +11,7 @@ export const SHARP_ATTRIBUTES = new Set([
   `maxWidth`,
   `maxHeight`,
   `quality`,
+  `avifOptions`,
   `jpegOptions`,
   `pngOptions`,
   `webpOptions`,

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

@@ -22,6 +22,7 @@ export interface IStaticImageProps extends Omit<GatsbyImageProps, "image"> {
   jpgOptions?: Record<string, unknown>
   pngOptions?: Record<string, unknown>
   webpOptions?: Record<string, unknown>
+  avifOptions?: Record<string, unknown>
   blurredOptions?: Record<string, unknown>
 }
 

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

@@ -20,6 +20,7 @@ export const ImageFormatType = new GraphQLEnumType({
     JPG: { value: `jpg` },
     PNG: { value: `png` },
     WEBP: { value: `webp` },
+    AVIF: { value: `avif` },
   },
 })
 
@@ -99,10 +100,10 @@ export function getGatsbyImageFieldConfig<TSource, TContext>(
       formats: {
         type: GraphQLList(ImageFormatType),
         description: stripIndent`
-            The image formats to generate. Valid values are "AUTO" (meaning the same format as the source image), "JPG", "PNG" and "WEBP". 
+            The image formats to generate. Valid values are AUTO (meaning the same format as the source image), JPG, PNG, WEBP and AVIF. 
             The default value is [AUTO, WEBP], and you should rarely need to change this. Take care if you specify JPG or PNG when you do
             not know the formats of the source images, as this could lead to unwanted results such as converting JPEGs to PNGs. Specifying 
-            both PNG and JPG is not supported and will be ignored.
+            both PNG and JPG is not supported and will be ignored. AVIF support is currently experimental.
         `,
         defaultValue: [`auto`, `webp`],
       },

e2e-tests/visual-regression/cypress/snapshots/image.js/StaticImage -- avif format -- renders correctly on iphone-6.snap.png

@@ -11,7 +11,7 @@
     "gatsby-core-utils": "^1.8.0-next.0",
     "gatsby-plugin-utils": "^0.7.0-next.1",
     "semver": "^7.3.2",
-    "sharp": "^0.26.3"
+    "sharp": "^0.27.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",

e2e-tests/visual-regression/src/pages/images/avif.js

@@ -23,7 +23,7 @@
     "probe-image-size": "^5.0.0",
     "progress": "^2.0.3",
     "semver": "^7.3.4",
-    "sharp": "^0.26.3",
+    "sharp": "^0.27.0",
     "svgo": "1.3.2",
     "uuid": "3.4.0"
   },

e2e-tests/visual-regression/src/pages/static-images/avif.js

@@ -9,7 +9,7 @@ import { createTransformObject } from "./plugin-options"
 
 const DEFAULT_BLURRED_IMAGE_WIDTH = 20
 
-type ImageFormat = "jpg" | "png" | "webp" | "" | "auto"
+type ImageFormat = "jpg" | "png" | "webp" | "avif" | "" | "auto"
 export interface ISharpGatsbyImageArgs {
   layout?: "fixed" | "fluid" | "constrained"
   formats?: Array<ImageFormat>
@@ -28,6 +28,7 @@ export interface ISharpGatsbyImageArgs {
   jpgOptions: Record<string, unknown>
   pngOptions: Record<string, unknown>
   webpOptions: Record<string, unknown>
+  avifOptions: Record<string, unknown>
   blurredOptions: { width?: number; toFormat?: ImageFormat }
 }
 export type FileNode = Node & {
@@ -159,6 +160,12 @@ export async function generateImageData({
   } else if (formats.has(`webp`)) {
     primaryFormat = `webp`
     options = args.webpOptions
+  } else if (formats.has(`avif`)) {
+    reporter.warn(
+      `Image ${file.relativePath} specified only AVIF format, with no fallback format. This will mean your site cannot be viewed in all browsers.`
+    )
+    primaryFormat = `avif`
+    options = args.webpOptions
   }
 
   const imageSizes: {
@@ -232,6 +239,35 @@ export async function generateImageData({
     },
   }
 
+  if (primaryFormat !== `avif` && formats.has(`avif`)) {
+    const transforms = imageSizes.sizes.map(outputWidth => {
+      const width = Math.round(outputWidth)
+      const transform = createTransformObject({
+        quality,
+        ...transformOptions,
+        fit,
+        cropFocus,
+        ...args.avifOptions,
+        width,
+        height: Math.round(width / imageSizes.aspectRatio),
+        toFormat: `avif`,
+      })
+      return transform
+    })
+
+    const avifImages = batchQueueImageResizing({
+      file,
+      transforms,
+      reporter,
+    })
+
+    imageProps.images.sources?.push({
+      srcSet: getSrcSet(avifImages),
+      type: `image/avif`,
+      sizes,
+    })
+  }
+
   if (primaryFormat !== `webp` && formats.has(`webp`)) {
     const transforms = imageSizes.sizes.map(outputWidth => {
       const width = Math.round(outputWidth)
@@ -253,10 +289,9 @@ export async function generateImageData({
       transforms,
       reporter,
     })
-    const webpSrcSet = getSrcSet(webpImages)
 
     imageProps.images.sources?.push({
-      srcSet: webpSrcSet,
+      srcSet: getSrcSet(webpImages),
       type: `image/webp`,
       sizes,
     })

packages/gatsby-plugin-image/src/babel-helpers.ts

@@ -22,7 +22,7 @@
     "is-relative-url": "^3.0.0",
     "lodash": "^4.17.20",
     "semver": "^7.3.2",
-    "sharp": "^0.26.3",
+    "sharp": "^0.27.0",
     "unist-util-select": "^1.5.0"
   },
   "devDependencies": {

packages/gatsby-plugin-image/src/components/static-image.server.tsx

@@ -13,7 +13,7 @@
     "potrace": "^2.1.8",
     "probe-image-size": "^5.0.0",
     "semver": "^7.3.4",
-    "sharp": "^0.26.3"
+    "sharp": "^0.27.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",

packages/gatsby-plugin-image/src/resolver-utils.ts

@@ -39,6 +39,7 @@ const {
   WebPOptionsType,
   BlurredOptionsType,
   TransformOptionsType,
+  AVIFOptionsType,
 } = require(`./types`)
 const { stripIndent } = require(`common-tags`)
 const { prefixId, CODES } = require(`./error-utils`)
@@ -493,6 +494,10 @@ const imageNodeType = ({
         type: WebPOptionsType,
         description: `Options to pass to sharp when generating WebP images.`,
       },
+      avifOptions: {
+        type: AVIFOptionsType,
+        description: `Options to pass to sharp when generating AVIF images.`,
+      },
       transformOptions: {
         type: TransformOptionsType,
         description: `Options to pass to sharp to control cropping and other image manipulations.`,

packages/gatsby-plugin-manifest/package.json

@@ -22,6 +22,7 @@ export const ImageFormatType = new GraphQLEnumType({
     JPG: { value: `jpg` },
     PNG: { value: `png` },
     WEBP: { value: `webp` },
+    AVIF: { value: `avif` },
   },
 })
 
@@ -129,6 +130,23 @@ export const WebPOptionsType = new GraphQLInputObjectType({
   },
 })
 
+export const AVIFOptionsType = new GraphQLInputObjectType({
+  name: `AVIFOptions`,
+  fields: (): GraphQLInputFieldConfigMap => {
+    return {
+      quality: {
+        type: GraphQLInt,
+      },
+      lossless: {
+        type: GraphQLBoolean,
+      },
+      speed: {
+        type: GraphQLInt,
+      },
+    }
+  },
+})
+
 export const DuotoneGradientType = new GraphQLInputObjectType({
   name: `DuotoneGradient`,
   fields: (): GraphQLInputFieldConfigMap => {

packages/gatsby-plugin-sharp/package.json

@@ -17524,10 +17524,10 @@ node-abi@^2.7.0:
   dependencies:
     semver "^5.4.1"
 
-node-addon-api@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.2.tgz#04bc7b83fd845ba785bb6eae25bc857e1ef75681"
-  integrity sha512-+D4s2HCnxPd5PjjI0STKwncjXTUKKqm74MDMz9OPXavjsGmjkvwgLtA5yoxJUdmpj52+2u+RrXgPipahKczMKg==
+node-addon-api@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.1.0.tgz#98b21931557466c6729e51cb77cd39c965f42239"
+  integrity sha512-flmrDNB06LIl5lywUz7YlNGZH/5p0M7W28k8hzd9Lshtdh1wshD2Y+U4h9LD6KObOy1f+fEVdgprPrEymjM5uw==
 
 node-cleanup@^2.1.2:
   version "2.1.2"
@@ -22782,18 +22782,18 @@ shallowequal@^1.1.0:
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
-sharp@^0.26.3:
-  version "0.26.3"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.26.3.tgz#9de8577a986b22538e6e12ced1f7e8a53f9728de"
-  integrity sha512-NdEJ9S6AMr8Px0zgtFo1TJjMK/ROMU92MkDtYn2BBrDjIx3YfH9TUyGdzPC+I/L619GeYQc690Vbaxc5FPCCWg==
+sharp@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.27.0.tgz#523fba913ba674985dcc688a6a5237384079d80f"
+  integrity sha512-II+YBCW3JuVWQZdpTEA2IBjJcYXPuoKo3AUqYuW+FK9Um93v2gPE2ihICCsN5nHTUoP8WCjqA83c096e8n//Rw==
   dependencies:
     array-flatten "^3.0.0"
     color "^3.1.3"
     detect-libc "^1.0.3"
-    node-addon-api "^3.0.2"
+    node-addon-api "^3.1.0"
     npmlog "^4.1.2"
     prebuild-install "^6.0.0"
-    semver "^7.3.2"
+    semver "^7.3.4"
     simple-get "^4.0.0"
     tar-fs "^2.1.1"
     tunnel-agent "^0.6.0"