feat(contentful): modifying schemes to add support for AVIF images (#33903)

* feat(contentful): modifying schemes to add support for AVIF images

* add avif to the missing parts of the image processing code

* extend e2e tests to check for custom image formats

Co-authored-by: Esteban Ramos Coronado <[email protected]>
Co-authored-by: axe312ger <[email protected]>

Author: 3 people

e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js

@@ -79,6 +79,18 @@ describe(`gatsby-plugin-image`, () => {
   it(`blurred`, testConfig, () =>
     testGatsbyPluginImage(`blurred`, hasBase64Placeholder)
   )
+  it(`Custom Image Formats`, testConfig, () => {
+    cy.get(`[data-cy="customImageFormats"] picture source[type="image/webp"]`)
+      .invoke(`attr`, `srcset`)
+      .should("contain", "fm=webp")
+    cy.get(`[data-cy="customImageFormats"] picture source[type="image/avif"]`)
+      .invoke(`attr`, `srcset`)
+      .should("contain", "fm=avif")
+    cy.get(`[data-cy="customImageFormats"] picture img`)
+      .invoke(`attr`, `srcset`)
+      .should("not.contain", "fm=webp")
+      .should("not.contain", "fm=avif")
+  })
   it(`sqip`, testConfig, () => testGatsbyPluginImage(`sqip`, hasSVGPlaceholder))
 
   it(`english`, testConfig, () => {

e2e-tests/contentful/src/pages/gatsby-plugin-image.js

@@ -123,6 +123,25 @@ const GatsbyPluginImagePage = ({ data }) => {
         ))}
       </Grid>
 
+      <h2>gatsby-plugin-image: Custom Image Formats (WebP & AVIF)</h2>
+      <Grid data-cy="customImageFormats">
+        {data.default.nodes.map(node => (
+          <div>
+            <p>
+              <strong>
+                {node.title} ({node.file.fileName.split(".").pop()})
+              </strong>
+            </p>
+            {node.description && <p>{node.description}</p>}
+            {node.customImageFormats ? (
+              <GatsbyImage image={node.customImageFormats} />
+            ) : (
+              <SvgImage src={node.file.url} />
+            )}
+          </div>
+        ))}
+      </Grid>
+
       <h2>gatsby-plugin-image: SQIP Placeholder</h2>
       <Grid data-cy="sqip">
         {data.default.nodes.map(node => (
@@ -232,6 +251,7 @@ export const pageQuery = graphql`
           layout: FIXED
           placeholder: BLURRED
         )
+        customImageFormats: gatsbyImageData(formats: [AVIF, WEBP, AUTO])
         sqip(numberOfPrimitives: 12, blur: 0, mode: 1) {
           dataURI
         }

packages/gatsby-source-contentful/src/gatsby-plugin-image.js

@@ -217,7 +217,7 @@ export function generateImageSource(
 
   if (!validImageFormats.has(toFormat)) {
     console.warn(
-      `[gatsby-source-contentful] Invalid image format "${toFormat}". Supported types are jpg, png and webp"`
+      `[gatsby-source-contentful] Invalid image format "${toFormat}". Supported types are jpg, png, webp and avif"`
     )
     return undefined
   }

packages/gatsby-source-contentful/src/image-helpers.js

@@ -6,7 +6,7 @@ import { URLSearchParams } from "url"
 export const CONTENTFUL_IMAGE_MAX_SIZE = 4000
 
 // Supported Image Formats by the Contentful Image API (https://www.contentful.com/developers/docs/references/images-api/#/reference/changing-formats/image-format)
-export const validImageFormats = new Set([`jpg`, `png`, `webp`, `gif`])
+export const validImageFormats = new Set([`jpg`, `png`, `webp`, `gif`, `avif`])
 
 // Determine the proper file extension based on mime type
 export const mimeTypeExtensions = new Map([
@@ -15,6 +15,7 @@ export const mimeTypeExtensions = new Map([
   [`image/gif`, `.gif`],
   [`image/png`, `.png`],
   [`image/webp`, `.webp`],
+  [`image/avif`, `.avif`],
 ])
 
 // Check if Contentful asset is actually an image

packages/gatsby-source-contentful/src/schemes.js

@@ -9,6 +9,7 @@ export const ImageFormatType = new GraphQLEnumType({
     JPG: { value: `jpg` },
     PNG: { value: `png` },
     WEBP: { value: `webp` },
+    AVIF: { value: `avif` },
   },
 })