perf(images): adjust GatsbyImage breakpoints (#158)

These now match the breakpoints used by our CSS (and improve the Lighthouse performance score).
wKovacs64 · Mar 7, 2021 · 78a63ed · 78a63ed
1 parent 1c21179
commit 78a63ed
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 0 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -50,6 +50,7 @@ export const query = graphql`
               layout: FULL_WIDTH
               aspectRatio: 1
               placeholder: BLURRED
+              breakpoints: [576, 768, 992, 1200]
             )
           }
           ingredients

diff --git a/src/pages/search.js b/src/pages/search.js
@@ -77,6 +77,7 @@ export const query = graphql`
               layout: FULL_WIDTH
               aspectRatio: 1
               placeholder: BLURRED
+              breakpoints: [576, 768, 992, 1200]
             )
           }
           ingredients

diff --git a/src/templates/drink-page.js b/src/templates/drink-page.js
@@ -59,6 +59,7 @@ export const query = graphql`
           layout: FULL_WIDTH
           aspectRatio: 1
           placeholder: BLURRED
+          breakpoints: [576, 768, 992, 1200]
         )
         socialGatsbyImageData: gatsbyImageData(
           layout: FIXED

diff --git a/src/templates/tag-page.js b/src/templates/tag-page.js
@@ -68,6 +68,7 @@ export const query = graphql`
               layout: FULL_WIDTH
               aspectRatio: 1
               placeholder: BLURRED
+              breakpoints: [576, 768, 992, 1200]
             )
           }
           ingredients