[UPD] set image placeholder for lazy-loading

Author: carms-ng

src/components/bg-image.js

@@ -6,7 +6,11 @@ export default function BackgroundImage({style, imgStyle}) {
   const data = useStaticQuery(graphql`{
   fileName: file(relativePath: {eq: "bunker.png"}) {
     childImageSharp {
-      gatsbyImageData(width: 1000, quality: 80, layout: CONSTRAINED)
+      gatsbyImageData(
+        width: 1000,
+        placeholder: BLURRED
+        layout: CONSTRAINED
+      )
     }
   }
 }

src/components/carousel.js

@@ -13,7 +13,11 @@ export default function Carousel() {
       node {
         base
         childImageSharp {
-          gatsbyImageData(width: 500, quality: 80, layout: FULL_WIDTH)
+          gatsbyImageData(
+            width: 500,
+            placeholder: BLURRED,
+            layout: FULL_WIDTH
+          )
         }
         id
       }

src/components/contact.js

@@ -52,6 +52,7 @@ export default function Contact() {
         className="absolute" 
         style={{zIndex: `-1`, width: `50vw`, left: `0`, bottom: `5vh`}}>
         <StaticImage
+          placeholder="blurred"
           src="../assets/images/map.png"
           width={1000}
           alt="Map outline of Canada"

src/components/header.js

@@ -34,6 +34,7 @@ export default function Header() {
           {/* TODO: center logo */}
           <Link to="/">
             <StaticImage
+              placeholder="blurred"
               src="../assets/images/coderbunker-logo-black.png"
               alt="Coderbunker Logo"
               width={50}

src/components/hero.js

@@ -46,7 +46,7 @@ export default function Hero() {
 
           {/* Hero Image*/}
           <div className="flex-1 hidden md:block p-16">
-            <StaticImage src="../assets/images/coders.png"  alt="Coderbunker Coders"/>
+            <StaticImage placeholder="blurred" src="../assets/images/coders.png"  alt="Coderbunker Coders"/>
           </div>
         </div>
 

src/components/join.js

@@ -27,6 +27,7 @@ export default function Join() {
           <p className="text-lg lg:text-xl md:my-4 md:pb-8 text-center">#SoftwareDevelopment #EmbeddedSystems #Blockchain #DigitalIdentity #PublicKeyInfrastructure #SystemAdministration #Cybersecurity #Encryption #Linux #FPGA #ARM #RISC-V #Ethereum #PGP #PostgreSQL #AWS #Azure #GoogleCloud #etc</p>
           <div style={{maxWidth: `70vw`, width: `500px`, margin: `0 auto`, padding: `2rem`}}>
             <StaticImage
+              placeholder="blurred"
               src="../assets/images/coders.png"
               alt="Coderbunker Coders Coworking"
             />

src/components/logo-garden.js

@@ -13,7 +13,11 @@ export default function LogoGarden() {
         node {
           base
           childImageSharp {
-            gatsbyImageData(width: 150, quality: 80, layout: CONSTRAINED)
+            gatsbyImageData(
+              width: 150,
+              placeholder: BLURRED,
+              layout: CONSTRAINED
+            )
             id
           }
         }

src/components/stacked-avatar.js

@@ -10,7 +10,11 @@ export default function StackedAvatar() {
         node {
           base
           childImageSharp {
-            gatsbyImageData(width: 75, layout: FIXED)
+            gatsbyImageData(
+              width: 75,
+              placeholder: BLURRED,
+              layout: FIXED
+            )
             id
           }
         }