optimize performance of images.

gatsby-config.js

@@ -86,6 +86,13 @@ module.exports = {
     'gatsby-plugin-typescript',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
+    { 
+        resolve: `gatsby-source-filesystem`, 
+        options: { 
+            path: `./src/resources/`,
+            name: `resources`
+        } 
+    },
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-catch-links',
     {

src/blog/gitpod-launch.md

@@ -46,7 +46,7 @@ Once you've installed the app for your GitHub repository, it will pre-build dev
 
 We call this feature prebuilt workspaces and you can read more about it in [Chris' post](/blog/prebuilds/).
 
-![Prebuilt Workspaces](./gitpod-launch/prebuilt-workspaces.png)
+![Prebuilt Workspaces](/prebuilt-workspaces.png)
 
 ## More Flow
 Your dev environment opens differently depending on the GitHub page you are coming from. You can, for instance, open branches or files by simply going to the respective GitHub page and pressing the button (or prefixing the URL) there.

src/components/Banner.tsx

@@ -10,7 +10,7 @@ const StyledBanner = styled.header`
 
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: stretch;
   padding: 14rem 0 10rem;
 
   @media (max-width: 960px) {
@@ -27,6 +27,10 @@ const StyledBanner = styled.header`
     text-align: center;
   }
 
+  .banner__text {
+    flex: 0 0 55%;
+  }
+
   .para {
     margin-top: 3rem;
 
@@ -47,44 +51,53 @@ const StyledBanner = styled.header`
     margin-top: 3rem;
   }
 
-  object,
-  img {
-    display: block;
-    height: 35rem;
 
+  .img-container {
+    display: block;
+    flex: 0 0 30%;
+    
     @media (min-width: 961px) {
       margin-left: 3rem;
     }
 
     @media (max-width: 960px) {
       height: 20rem;
+      width: 100%;
+      height: 100%;
+      max-width: 30rem;
       margin: 5rem 0;
     }
+
+    @media (max-width: 500px) {
+        max-width: 22rem;
+    }
   }
 `
 
 interface BannerProps {
-  subtitle: string
-  title: JSX.Element
-  paragraph?: string | JSX.Element
-  linkPath: string
-  linkText: string
-  img: JSX.Element
+    subtitle: string
+    title: JSX.Element
+    paragraph?: string | JSX.Element
+    linkPath: string
+    linkText: string
+    img: JSX.Element
 }
 
 const Banner: React.SFC<BannerProps> = ({ subtitle, title, paragraph, linkPath, linkText, img, children }) => (
-  <div className="row pattern">
-    <StyledBanner role="banner" className="banner">
-      <div className="banner__text">
-        <h3 className="sub">{subtitle}</h3>
-        {title}
-        {paragraph ? <p className="para">{paragraph}</p> : null}
-        {link(linkPath, linkText, '', true, false)}
-        {children}
-      </div>
-      {img}
-    </StyledBanner>
-  </div>
+    <div className="row pattern">
+        <StyledBanner role="banner" className="banner">
+            <div className="banner__text">
+                <h3 className="sub">{subtitle}</h3>
+                {title}
+                {paragraph ? <p className="para">{paragraph}</p> : null}
+                {link(linkPath, linkText, '', true, false)}
+                {children}
+            </div>
+            <div className="img-container">
+                {img}
+            </div>
+        </StyledBanner>
+    </div>
 )
 
 export default Banner

src/components/FeatureCard.tsx

@@ -279,6 +279,7 @@ export interface FeatureCardProps {
   Figure?: () => JSX.Element
   figFootnote?: string | JSX.Element
   footnote?: string | JSX.Element
+  gatsbyImage?: JSX.Element
 }
 
 const FeatureCard = ({
@@ -294,7 +295,8 @@ const FeatureCard = ({
   Figure,
   opposite,
   figFootnote,
-  footnote
+  footnote,
+  gatsbyImage
 }: FeatureCardProps) => {
   const [renderedGraphic, setRenderedGraphic] = useState<string>('')
   const hasFigFootnote = typeof figFootnote == 'string' || typeof figFootnote == 'object'
@@ -309,6 +311,9 @@ const FeatureCard = ({
       <div className="img-container in-view">
         {Graphic ? <Graphic renderedGraphic={renderedGraphic} /> : null}
         {src ? <img src={src} alt={alt} style={featuresList && featuresList.length ? { transform: 'scale(.9)' } : {}} /> : null}
+        {
+            gatsbyImage ? gatsbyImage : null
+        }
         {featuresList && featuresList.length ? (
           <ul>
             {featuresList.map((feat, i) => (

src/components/ImageProvider.tsx

@@ -0,0 +1,61 @@
+import React, { CSSProperties } from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import Img from 'gatsby-image'
+
+import styled from '@emotion/styled'
+
+const StyledImageProvider = styled.div`
+    height: 100%;
+    width: 100%;
+`
+
+interface ImageProviderProps {
+    fileName: string
+    alt: string
+    wrapperStyles?: CSSProperties
+    imageStyles?: CSSProperties
+    isNotRelativeToGatsbyImgWrapper?: boolean
+    IsAPricingBoxIcon?: boolean
+}
+
+const ImageProvider = ({ fileName, alt, wrapperStyles, imageStyles, isNotRelativeToGatsbyImgWrapper, IsAPricingBoxIcon }: ImageProviderProps) => {
+  const { allImageSharp } = useStaticQuery(graphql`
+    query {
+      allImageSharp {
+        nodes {
+          fluid(traceSVG: { color: "#0b2144" }) {
+            originalName
+            tracedSVG
+            src
+          }
+        }
+      }
+    }
+  `)
+
+  const fluid = allImageSharp.nodes.find((n: any) => n.fluid.originalName === fileName)
+    .fluid
+
+  const imageStylesIfIsNotRelativeToGatsbyImgWrapper = {
+    top: '50%', 
+    transform: 'translateY(-50%) scale(.93)',
+  };
+
+  let position;
+
+  if (isNotRelativeToGatsbyImgWrapper) {
+    position = 'none'
+  } else if (IsAPricingBoxIcon) {
+    position = 'static'
+  } else {
+    position = 'relative'
+  }
+
+  return (
+    <StyledImageProvider>
+      <Img className="gatsby-image" fluid={fluid} alt={alt} style={{position, ...wrapperStyles}} imgStyle={isNotRelativeToGatsbyImgWrapper ? imageStylesIfIsNotRelativeToGatsbyImgWrapper : imageStyles ? imageStyles : {}} />
+    </StyledImageProvider>
+  )
+}
+
+export default ImageProvider;

src/components/Offers.tsx

@@ -57,21 +57,7 @@ const Offers: React.SFC<OffersProps> = ({ offers, title, para }) => (
                         (offer, i) => (
                             <PricingBox
                                 key={i}
-                                title={offer.title}
-                                img={offer.img}
-                                price={offer.price}
-                                duration={offer.duration}
-                                feature={offer.feature}
-                                features={offer.features}
-                                transform={offer.transform}
-                                btnText={offer.btnText}
-                                link={offer.link}
-                                background={offer.background}
-                                hideButton={offer.hideButton}
-                                btn={offer.btn}
-                                text={offer.text}
-                                banner={offer.banner}
-                                bannerColor={offer.bannerColor}
+                                {...offer}
                             />
                         )
                     )

src/components/PricingBox.tsx

@@ -81,7 +81,7 @@ const StyledPricingBox = styled.div<StyledPricingBoxProps>`
         margin: ${({ isTitleOutside }) => (isTitleOutside ? '-7rem 0 6rem' : '')}
     }
 
-    img, object {
+    img, object, .g-image {
         display: inline-block;
         margin: 3rem 0 1rem;
         height: 8rem;
@@ -94,6 +94,13 @@ const StyledPricingBox = styled.div<StyledPricingBoxProps>`
         }
     }
 
+    .g-image {
+        position: relative;
+        width: 7rem;
+        height: 7rem;        
+        margin: 0 0 5rem;
+    }
+
     .price {
         font-size: 2.1rem;
         font-weight: 600;
@@ -241,7 +248,8 @@ const StyledPricingBox = styled.div<StyledPricingBoxProps>`
 
 export interface PricingBoxProps {
   title: string
-  img: JSX.Element
+  img?: JSX.Element
+  gatsbyImage?: JSX.Element
   price?: string | JSX.Element
   duration?: string
   feature?: string | JSX.Element
@@ -286,7 +294,8 @@ const PricingBox: React.SFC<PricingBoxProps> = ({
   info,
   areFeaturesBold,
   boldFeaturesCount = 0,
-  perUserMonth
+  perUserMonth,
+  gatsbyImage
 }) => (
   <StyledPricingBox
     transform={transform}
@@ -299,6 +308,7 @@ const PricingBox: React.SFC<PricingBoxProps> = ({
   >
     <h4>{title}</h4>
     {img ? img : null}
+    {gatsbyImage ? <div className="g-image">{gatsbyImage}</div> : null}
     {price ? <div className="price">{price}</div> : null}
     { perUserMonth ? <div className="duration" style={{fontWeight: 400}}>per user/month</div> : null }
     {duration ? <div className="duration">{duration}</div> : null}

src/components/features/FullAutomationGraphics.tsx

@@ -1,37 +1,30 @@
 import React from 'react'
 
-import ReadyToCodeImg from '../../resources/automated-setup-default.png'
-import AutomatedSetupGraphicGitpod from '../../resources/automated-setup-gitpod.png'
-import AutomatedSetupGraphicOrdinary from '../../resources/automated-setup-ordinary.png'
+import ImageProvider from '../ImageProvider'
 
 const FullAutomationGraphics = ({ renderedGraphic }: { renderedGraphic: string }
 ) => {
     const graphics = [
         {
-            src: ReadyToCodeImg,
+            src: 'automated-setup-default.png',
             alt: 'Gitpod Ready to Code',
             name: ''
         },
         {
-            src: AutomatedSetupGraphicGitpod,
+            src: 'automated-setup-gitpod.png',
             alt: 'Setup Automated with Gitpod',
             name: 'gitpod'
         },
         {
-            src: AutomatedSetupGraphicOrdinary,
+            src: 'automated-setup-ordinary.png',
             alt: 'Setup Ordinary without Gitpod',
             name: 'usual'
         }
     ]
 
     return (
         graphics.map((g, i) => (
-            <img
-                key={i}
-                src={g.src}
-                alt={g.alt}
-                style={ renderedGraphic !== g.name ? {display: 'none'}: {}}
-            />
+            <ImageProvider isNotRelativeToGatsbyImgWrapper={true} key={i+g.name}  fileName={g.src} alt={g.alt} wrapperStyles={renderedGraphic !== g.name ? {display: 'none'}: {}} />
         ))
     )
 }

src/components/features/Intro.tsx

@@ -4,7 +4,8 @@ import styled from '@emotion/styled'
 import FeatureBox from './FeatureBox'
 import { features } from '../../contents/features'
 import { sizes } from '../../styles/variables'
-import IceStick from '../../resources/ice-stick.svg'
+import { StaticQuery, graphql } from 'gatsby'
+import Img from 'gatsby-image'
 
 const Styled = styled.div`
   .intro {
@@ -16,6 +17,10 @@ const Styled = styled.div`
       margin: 0 auto;
     }
 
+    .gatsby-image-wrapper {
+        height: 20rem;
+    }
+
     h1 {
       text-align: center;
     }
@@ -60,19 +65,39 @@ const Styled = styled.div`
 `
 
 const Intro = () => (
-  <div className="row">
-    <Styled>
-      <section className="intro pattern">
-        <object role="presentation" tabIndex={-1} data={IceStick} className="ice-stick" />
-        <h1>Features</h1>
-        <div className="features">
-          {features.map((f, i) => (
-            <FeatureBox key={i} alt={f.alt} img={f.icon} text={f.iconTitle} path={f.id} />
-          ))}
-        </div>
-      </section>
-    </Styled>
-  </div>
+  <StaticQuery
+    query={graphql`
+      query {
+        file(relativePath: { eq: "ice-cream.png" }) {
+          childImageSharp {
+            fluid(traceSVG: { color: "#0b2144" }) {
+                tracedSVG
+                src
+            }
+          }
+        }
+      }
+    `}
+    render={(data) => (
+      <div className="row">
+        <Styled>
+          <section className="intro pattern">
+            <Img 
+                fluid={data.file.childImageSharp.fluid} 
+                alt="Ice Stick"
+                className="ice-stick"
+            />
+            <h1>Features</h1>
+            <div className="features">
+              {features.map((f, i) => (
+                <FeatureBox key={i} alt={f.alt} img={f.icon} text={f.iconTitle} path={f.id} />
+              ))}
+            </div>
+          </section>
+        </Styled>
+      </div>
+    )}
+  />
 )
 
 export default Intro