fix(gatsby-plugin-image): Correctly handle formats in StaticImage (#28618) (#28630)

* Include formats prop

* Default to auto, webp

* fix(gatsby-plugin-sharp): Include default transform options for webp

* Update snapshots

* Is this why it fails?

* Allow time for other image

* Use jpg-only for lazy-load tests.
Lazy-load tests currently fail if there's a webp image. This will need a proper fix later, but not in this PR.
This reverts commit 7f1cd2a.

(cherry picked from commit 912f30c)

Co-authored-by: Matt Kane <[email protected]>

Author: LekoArts

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>
   )

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`,

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,