fix(gatsby-plugin-image): Correctly handle formats in StaticImage (#2…

…8618) (#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 <matt@gatsbyjs.com>
gatsbyjs · Dec 15, 2020 · eff15a1 · eff15a1
1 parent 7f43c3b
commit eff15a1
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 0 deletions.
diff --git 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
@@ -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
@@ -110,6 +110,8 @@ export async function generateImageData({
     quality,
   } = args
 
+  args.formats = args.formats || [`auto`, `webp`]
+
   const {
     fit = `cover`,
     cropFocus = sharp.strategy.attention,