diff --git a/e2e-tests/gatsby-static-image/src/pages/lazy-loading.js b/e2e-tests/gatsby-static-image/src/pages/lazy-loading.js
index 8021b424aef94..412cfdf6bdd8e 100644
--- a/e2e-tests/gatsby-static-image/src/pages/lazy-loading.js
+++ b/e2e-tests/gatsby-static-image/src/pages/lazy-loading.js
@@ -11,6 +11,7 @@ export default function NativeLazyLoadingPage() {
         height={59}
         alt="Citrus fruits"
         loading="lazy"
+        formats={["jpg"]}
       />
 
       <div style={{ height: `5000px`, background: `#F4F4F4` }} />
@@ -22,6 +23,7 @@ export default function NativeLazyLoadingPage() {
         height={59}
         alt="Citrus fruits"
         loading="lazy"
+        formats={["jpg"]}
       />
     </div>
   )
diff --git a/packages/gatsby-plugin-image/src/babel-helpers.ts b/packages/gatsby-plugin-image/src/babel-helpers.ts
index 1bdbdcb19085d..9723d4d88f2a8 100644
--- a/packages/gatsby-plugin-image/src/babel-helpers.ts
+++ b/packages/gatsby-plugin-image/src/babel-helpers.ts
@@ -7,6 +7,7 @@ import camelCase from "camelcase"
 export const SHARP_ATTRIBUTES = new Set([
   `src`,
   `layout`,
+  `formats`,
   `maxWidth`,
   `maxHeight`,
   `quality`,
diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts
index ba939f1b232b7..68c4c5b441531 100644
--- a/packages/gatsby-plugin-sharp/src/image-data.ts
+++ b/packages/gatsby-plugin-sharp/src/image-data.ts
@@ -110,6 +110,8 @@ export async function generateImageData({
     quality,
   } = args
 
+  args.formats = args.formats || [`auto`, `webp`]
+
   const {
     fit = `cover`,
     cropFocus = sharp.strategy.attention,