optimize performance of images.

gitpod-io · Nov 23, 2020 · 34f5e4e · 34f5e4e
1 parent 42f81ca
commit 34f5e4e
Show file tree

Hide file tree

Showing 21 changed files with 336 additions and 191 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -81,6 +81,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',
     {

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -27,6 +27,10 @@ const StyledBanner = styled.header`
     text-align: center;
   }
 
+  .banner__text {
+    flex: 0 0 55%;
+  }
+
   .para {
     margin-top: 3rem;
 
@@ -47,19 +51,24 @@ const StyledBanner = styled.header`
     margin-top: 3rem;
   }
 
-  object,
-  img {
+  .img-container {
     display: block;
-    height: 35rem;
+    flex: 0 0 28%;
 
     @media (min-width: 961px) {
       margin-left: 3rem;
     }
 
     @media (max-width: 960px) {
       height: 20rem;
+      width: 100%;
+      max-width: 30rem;
       margin: 5rem 0;
     }
+
+    @media (max-width: 500px) {
+        max-width: 22rem;
+    }
   }
 `
 
@@ -82,7 +91,9 @@ const Banner: React.SFC<BannerProps> = ({ subtitle, title, paragraph, linkPath,
         {link(linkPath, linkText, '', true, false)}
         {children}
       </div>
-      {img}
+      <div className="img-container">
+        {img}
+      </div>
     </StyledBanner>
   </div>
 )

diff --git a/src/components/features/Intro.tsx b/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 {
@@ -60,19 +61,38 @@ 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(quality: 100, maxWidth: 1980) {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
+      }
+    `}
+    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
diff --git a/src/components/index/Banner.tsx b/src/components/index/Banner.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 
-import Screenshot from '../../resources/screenshot.png'
 import styled from '@emotion/styled'
 import GitLab from '../../resources/gitlab.svg'
 import GitHub from '../../resources/octicons-mark-github.svg'
 import Bitbucket from '../../resources/bitbucket.svg'
 import { sizes, colors } from '../../styles/variables'
+import { StaticQuery, graphql } from 'gatsby'
+import Img from 'gatsby-image'
 
 const Styled = styled.div`
   .pattern {
@@ -27,11 +28,13 @@ const Styled = styled.div`
     padding: 10rem 0 10rem;
 
     &__screenshot {
-      display: block;
-      margin-top: 3rem;
-      width: 100%;
-      max-width: 1000px;
-      box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2);
+      &-container {
+        display: block;
+        margin-top: 3rem;
+        width: 100%;
+        max-width: 1000px;
+        box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.2);
+      }
     }
 
     h1 {
@@ -65,32 +68,47 @@ const Styled = styled.div`
 `
 
 const Banner = () => (
-  <Styled>
-    <div className="pattern">
-      <div className="row">
-        <header role="banner" className="banner">
-          <div className="banner__text-box">
-            <h1>
-              <strong>Dev Environments</strong> Built for the Cloud.
-            </h1>
-            <p>Describe your dev environments as code and automate the last missing piece in your DevOps pipeline.</p>
-            <a href="#get-started" className="btn btn--cta">
-              Try Now
-            </a>
-            <p className="works-with">
-              Works with
-              <img src={GitLab} alt="GitLab" />
-              <img src={GitHub} alt="GitHub" />
-              <img src={Bitbucket} alt="Bitbucket" />
-            </p>
-          </div>
-          <div className="banner__screenshot-container">
-            <img alt="Gitpod Screenshot" src={Screenshot} className="banner__screenshot" />
+  <StaticQuery
+    query={graphql`
+      query {
+        file(relativePath: { eq: "screenshot.png" }) {
+          childImageSharp {
+            fluid(quality: 100, maxWidth: 1980) {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
+      }
+    `}
+    render={(data) => (
+      <Styled>
+        <div className="pattern">
+          <div className="row">
+            <header role="banner" className="banner">
+              <div className="banner__text-box">
+                <h1>
+                  <strong>Dev Environments</strong> Built for the Cloud.
+                </h1>
+                <p>Describe your dev environments as code and automate the last missing piece in your DevOps pipeline.</p>
+                <a href="#get-started" className="btn btn--cta">
+                  Try Now
+                </a>
+                <p className="works-with">
+                  Works with
+                  <img src={GitLab} alt="GitLab" />
+                  <img src={GitHub} alt="GitHub" />
+                  <img src={Bitbucket} alt="Bitbucket" />
+                </p>
+              </div>
+              <div className="banner__screenshot-container">
+                <Img alt="Gitpod Screenshot" fluid={data.file.childImageSharp.fluid} className="banner__screenshot" />
+              </div>
+            </header>
           </div>
-        </header>
-      </div>
-    </div>
-  </Styled>
+        </div>
+      </Styled>
+    )}
+  />
 )
 
 export default Banner
diff --git a/src/components/index/SaveHours.tsx b/src/components/index/SaveHours.tsx
@@ -1,69 +1,68 @@
 import React from 'react'
 
 import styled from '@emotion/styled'
-import RocketLaunch from '../../resources/rocket-launch.png'
 import { sizes } from '../../styles/variables'
+import Rocket from '../../resources/rocket-launch.png'
 
 const StyledSaveHours = styled.section`
-    max-width: 750px;
-    margin: 0 auto;
-    text-align: center;
+  max-width: 750px;
+  margin: 0 auto;
+  text-align: center;
 
-    @media(min-width: calc(${sizes.breakpoints.md} + 1px)) {
-        padding-bottom: 2rem;
-    }
-
-    @media(max-width: ${sizes.breakpoints.md}) {
-        max-width: 600px;
-    }
+  @media (min-width: calc(${sizes.breakpoints.md} + 1px)) {
+    padding-bottom: 2rem;
+  }
 
-    @media(max-width: 640px) {
-        max-width: 400px;
-    }
+  @media (max-width: ${sizes.breakpoints.md}) {
+    max-width: 600px;
+  }
 
-    h2 {
-        margin-bottom: 5rem;
-    }
+  @media (max-width: 640px) {
+    max-width: 400px;
+  }
 
-    img {
-        display: inline-block;
-        width: 18rem;
-        margin-bottom: 5rem;
+  h2 {
+    margin-bottom: 5rem;
+  }
 
-        @media(max-width: ${sizes.breakpoints.md}) {
-            margin-bottom: 3rem;
-        }
+  img {
+    display: inline-block;
+    width: 18rem;
+    margin-bottom: 5rem;
 
-        @media(max-width: 640px) {
-            width: 16rem;
-            margin-bottom: 4rem;
-        }
+    @media (max-width: ${sizes.breakpoints.md}) {
+      margin-bottom: 3rem;
     }
 
-    p {
-        max-width: 450px;
-        margin-left: auto;
-        margin-right: auto;
+    @media (max-width: 640px) {
+      width: 16rem;
+      margin-bottom: 4rem;
     }
+  }
+
+  p {
+    max-width: 450px;
+    margin-left: auto;
+    margin-right: auto;
+  }
 `
 
-const SaveHours = () => (
-  <div className="row">
-    <StyledSaveHours>
-      <div className="img-container">
-        <img src={RocketLaunch} alt="Rocket Launch" />
+const SaveHours = () =>  (
+      <div className="row">
+        <StyledSaveHours>
+          <div className="img-container">
+            <img src={Rocket} alt="Rocket Launch" />
+          </div>
+          <div className="text">
+            <h2>
+              <strong>Fast & Powerful.</strong> Streamline Your Development Workflow.
+            </h2>
+            <p>
+              Get fresh, task-based dev environments for any issue, branch and merge/pull request. Enter true GitOps and experience a new
+              level of productivity.
+            </p>
+          </div>
+        </StyledSaveHours>
       </div>
-      <div className="text">
-        <h2>
-          <strong>Fast & Powerful.</strong> Streamline Your Development Workflow.
-        </h2>
-        <p>
-          Get fresh, task-based dev environments for any issue, branch and merge/pull request. Enter true GitOps and experience a new level
-          of productivity.
-        </p>
-      </div>
-    </StyledSaveHours>
-  </div>
-)
-
+    )
 export default SaveHours
diff --git a/src/pages/education.tsx b/src/pages/education.tsx
@@ -18,8 +18,9 @@ import Gitlab from '../resources/gitlab.svg'
 import { Link } from 'gatsby'
 import PopOver from '../components/PopOver'
 import { isEurope } from '../utils/helpers'
+import Img from 'gatsby-image'
 
-const EducationPage: React.SFC<{}> = () => (
+const EducationPage: React.SFC<{}> = ({data}: any) => (
     <IndexLayout
         canonical='/education/'
         title="Education"
@@ -31,7 +32,7 @@ const EducationPage: React.SFC<{}> = () => (
                 paragraph="Gitpod simplifies the onboarding process, makes coding accessible from any device, and provides a productive learning environment."
                 linkPath="/education/#education"
                 linkText="Choose your Solution"
-                img={<object role="presentation" tabIndex={-1} style={{transform:"scale(0.8)"}} data={Saturn}/>}
+                img={<Img fluid={data.file.childImageSharp.fluid} alt="Education"/>}
             />
 
         <div className="grey-container">
@@ -170,4 +171,16 @@ const EducationPage: React.SFC<{}> = () => (
     </IndexLayout>
 )
 
+export const query = graphql`
+  query {
+    file(relativePath: { eq: "education.png" }) {
+        childImageSharp {
+            fluid(quality: 100, maxWidth: 1980) {
+                ...GatsbyImageSharpFluid
+            }
+        }
+    }
+  }
+`
+
 export default EducationPage