Suthesh/gatsby image nextgen

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@artsy/fresnel": "^1.2.2",
     "@svgr/webpack": "^5.4.0",
+    "@wardpeet/gatsby-image-nextgen": "0.0.2",
     "babel-plugin-styled-components": "^1.11.1",
     "commander": "^6.1.0",
     "crc-32": "^1.2.0",

src/components/elements/image/image-style.js

@@ -9,4 +9,8 @@ export const ImageWrapper = styled.div`
         width: 100%;
         height: 100%;
     }
+    & .gatsby-image {
+        width: 100%;
+        height: 100%;
+    }
 `

src/components/elements/image/image.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import Img from 'gatsby-image'
+import { GatsbyImage } from '@wardpeet/gatsby-image-nextgen'
 import { ImageWrapper } from './image-style'
 
 export const Image = ({ data, alt, width, height, className }) => {
     if (data) {
         const data_fluid = data.childImageSharp.fluid
         const data_fixed = data.childImageSharp.fixed
+
         return (
             <ImageWrapper className={className} width={width} height={height}>
                 <Img
@@ -19,3 +21,35 @@ export const Image = ({ data, alt, width, height, className }) => {
 
     return null
 }
+
+export const NextGenImage = ({ data, alt, width, height, className }) => {
+    if (data) {
+        const data_fluid = data.childImageSharp.fluid
+        const data_fixed = data.childImageSharp.fixed
+
+        return (
+            <ImageWrapper className={className} width={width} height={height}>
+                <GatsbyImage
+                    alt={alt}
+                    images={{
+                        fallback: {
+                            src: data_fluid ? data_fluid.src : data_fixed.src,
+                            srcSet: data_fluid ? data_fluid.srcSet : data_fixed.srcSet,
+                        },
+                        sources: [
+                            {
+                                src: data_fluid ? data_fluid.srcWebp : data_fixed.srcWebp,
+                                srcSet: data_fluid ? data_fluid.srcSetWebp : data_fixed.srcSetWebp,
+                                type: 'image/webp',
+                            },
+                        ],
+                    }}
+                    height="100%"
+                    layout={data_fluid ? 'fluid' : 'fixed'}
+                />
+            </ImageWrapper>
+        )
+    }
+
+    return null
+}

src/pages/home/_hero.js

@@ -5,7 +5,7 @@ import { useSnackbar } from 'react-simple-snackbar'
 import { StyledInput, StyledText, LogoWrapper, StyledImage, HeroContainer } from './_home-style'
 import { Media } from 'themes'
 import Login from 'common/login'
-import { WhiteText, Button, Flex, Image, Text, Background } from 'components/elements'
+import { WhiteText, Button, Flex, NextGenImage, Text, Background } from 'components/elements'
 import { localize, Localize } from 'components/localization'
 import { BinarySocketBase } from 'websocket/socket_base'
 import TrafficSource from 'common/traffic-source'
@@ -21,10 +21,32 @@ const query = graphql`
             ...fadeIn
         }
         hero_desktop: file(relativePath: { eq: "home/desktop/hero-image.png" }) {
-            ...desktopFadeIn
+            childImageSharp {
+                # Specify the image processing specifications right in the query.
+                # Makes it trivial to update as your page's design changes.
+                fixed(width: 688, height: 382) {
+                    fallback: base64
+                    width
+                    height
+                    src
+                    srcSet
+                    srcWebp
+                    srcSetWebp
+                }
+            }
         }
         hero_mobile: file(relativePath: { eq: "home/mobile/hero-image.png" }) {
-            ...mobileFadeIn
+            childImageSharp {
+                # Specify the image processing specifications right in the query.
+                # Makes it trivial to update as your page's design changes.
+                fluid {
+                    fallback: base64
+                    src
+                    srcSet
+                    srcWebp
+                    srcSetWebp
+                }
+            }
         }
     }
 `
@@ -190,7 +212,7 @@ export const Hero = () => {
                     </Flex>
                     <div>
                         <Media greaterThanOrEqual="desktop">
-                            <Image
+                            <NextGenImage
                                 data={data['hero_desktop']}
                                 alt="platform devices desktop"
                                 width="688px"

src/pages/home/_highlights.js

@@ -14,13 +14,43 @@ import { SectionContainer } from 'components/elements'
 const query = graphql`
     query {
         anytime: file(relativePath: { eq: "home/anytime-anywhere.jpg" }) {
-            ...fadeIn
+            childImageSharp {
+                # Specify the image processing specifications right in the query.
+                # Makes it trivial to update as your page's design changes.
+                fluid {
+                    fallback: base64
+                    src
+                    srcSet
+                    srcWebp
+                    srcSetWebp
+                }
+            }
         }
         crypto: file(relativePath: { eq: "home/crypto-wallets.png" }) {
-            ...fadeIn
+            childImageSharp {
+                # Specify the image processing specifications right in the query.
+                # Makes it trivial to update as your page's design changes.
+                fluid {
+                    fallback: base64
+                    src
+                    srcSet
+                    srcWebp
+                    srcSetWebp
+                }
+            }
         }
         deposit: file(relativePath: { eq: "home/minimum-deposit.jpg" }) {
-            ...fadeIn
+            childImageSharp {
+                # Specify the image processing specifications right in the query.
+                # Makes it trivial to update as your page's design changes.
+                fluid {
+                    fallback: base64
+                    src
+                    srcSet
+                    srcWebp
+                    srcSetWebp
+                }
+            }
         }
     }
 `
@@ -43,7 +73,7 @@ export const Highlights = () => {
                         data={data.anytime}
                         alt="highlights anytime"
                         width={{ _: '300px', xxl: '588px' }}
-                        height={{ _: '100%', xxl: '100%' }}
+                        height={{ _: '310px', xxl: '688px' }}
                     />
                 </ContentWrapper>
             </PartitionContainer>
@@ -64,7 +94,7 @@ export const Highlights = () => {
                         data={data.crypto}
                         alt="crypto wallet"
                         width={{ _: '292px', xxl: '528px' }}
-                        height={{ _: '100%', xxl: '528px' }}
+                        height={{ _: '292px', xxl: '528px' }}
                     />
                 </ContentWrapper>
             </PartitionContainer>
@@ -85,7 +115,7 @@ export const Highlights = () => {
                         data={data.deposit}
                         alt="deposit"
                         width={{ _: '276px', xxl: '510px' }}
-                        height={{ _: '100%', xxl: '256px' }}
+                        height={{ _: '138px', xxl: '256px' }}
                     />
                 </ContentWrapper>
             </PartitionContainer>

src/pages/home/_home-style.js

@@ -9,6 +9,7 @@ import {
     Image,
     Text,
     Background,
+    NextGenImage,
 } from 'components/elements'
 import { device } from 'themes/device'
 
@@ -46,7 +47,7 @@ export const LogoWrapper = styled(Flex)`
     margin-left: 8px;
 `
 
-export const StyledImage = styled(Image)`
+export const StyledImage = styled(NextGenImage)`
     @media ${device.mobileS} {
         width: 329px;
         height: 181px;
@@ -83,7 +84,7 @@ export const ContentWrapper = styled(Container)`
     }
 `
 
-export const HighLightsImage = styled(Image)`
+export const HighLightsImage = styled(NextGenImage)`
     margin: auto;
 `
 

src/pages/home/_reviews.js

@@ -8,14 +8,26 @@ import {
     Carousel,
     SectionContainer,
     Container,
-    Image,
+    NextGenImage,
 } from 'components/elements'
 import { Localize, localize } from 'components/localization'
 
 const query = graphql`
     query {
         jose: file(relativePath: { eq: "home/reviews/jose.png" }) {
-            ...fadeIn
+            childImageSharp {
+                # Specify the image processing specifications right in the query.
+                # Makes it trivial to update as your page's design changes.
+                fixed(width: 48, height: 48) {
+                    fallback: base64
+                    width
+                    height
+                    src
+                    srcSet
+                    srcWebp
+                    srcSetWebp
+                }
+            }
         }
     }
 `
@@ -27,7 +39,7 @@ const Card = ({ name, quote, location, image }) => {
                 {quote}
             </CenterText>
             <Flex m="auto">
-                <Image data={image} alt="jose" width="48px" height="48px" />
+                <NextGenImage data={image} alt="jose" width="48px" height="48px" />
                 <VFlex ml={'xs'}>
                     <Text fontSize={'s'} fontWeight="bold">
                         {name}