diff --git a/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js b/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js
index 98ae486d7f9e8..351da44f35c86 100644
--- a/e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js
+++ b/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, () => {
diff --git a/e2e-tests/contentful/src/pages/gatsby-plugin-image.js b/e2e-tests/contentful/src/pages/gatsby-plugin-image.js
index 38f11874aa32f..98d3ea31eb993 100644
--- a/e2e-tests/contentful/src/pages/gatsby-plugin-image.js
+++ b/e2e-tests/contentful/src/pages/gatsby-plugin-image.js
@@ -123,6 +123,25 @@ const GatsbyPluginImagePage = ({ data }) => {
))}
+
gatsby-plugin-image: Custom Image Formats (WebP & AVIF)
+
+ {data.default.nodes.map(node => (
+
+
+
+ {node.title} ({node.file.fileName.split(".").pop()})
+
+
+ {node.description &&
{node.description}
}
+ {node.customImageFormats ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+
gatsby-plugin-image: SQIP Placeholder
{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
}
diff --git a/packages/gatsby-source-contentful/src/gatsby-plugin-image.js b/packages/gatsby-source-contentful/src/gatsby-plugin-image.js
index 529a3880469e4..fd0aed1808235 100644
--- a/packages/gatsby-source-contentful/src/gatsby-plugin-image.js
+++ b/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
}
diff --git a/packages/gatsby-source-contentful/src/image-helpers.js b/packages/gatsby-source-contentful/src/image-helpers.js
index 80469364757ed..7bfe412e93f69 100644
--- a/packages/gatsby-source-contentful/src/image-helpers.js
+++ b/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
diff --git a/packages/gatsby-source-contentful/src/schemes.js b/packages/gatsby-source-contentful/src/schemes.js
index 53e0402adfcc3..abc4db100761a 100644
--- a/packages/gatsby-source-contentful/src/schemes.js
+++ b/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` },
},
})