optimize loading and performance for images.

Fixes gitpod-io/website#821
gitpod-io · Nov 2, 2020 · 1d57610 · 1d57610
1 parent 42f81ca
commit 1d57610
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 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/index/Banner.tsx b/src/components/index/Banner.tsx
@@ -1,11 +1,11 @@
 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 Img from 'gatsby-image'
 
 const Styled = styled.div`
   .pattern {
@@ -27,11 +27,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 {
@@ -64,7 +66,7 @@ const Styled = styled.div`
   }
 `
 
-const Banner = () => (
+const Banner = ({screenshot}: any) => (
   <Styled>
     <div className="pattern">
       <div className="row">
@@ -85,7 +87,7 @@ const Banner = () => (
             </p>
           </div>
           <div className="banner__screenshot-container">
-            <img alt="Gitpod Screenshot" src={Screenshot} className="banner__screenshot" />
+            <Img alt="Gitpod Screenshot" fluid={screenshot} className="banner__screenshot" />
           </div>
         </header>
       </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -25,11 +25,12 @@ import AmazonLogo from '../resources/amazon.svg'
 import IntelLogo from '../resources/intel.svg'
 import { features } from '../contents/index'
 import SecurityAndOSS from '../components/index/SecurityAndOSS'
+import { graphql } from 'gatsby'
 // import ProductivityWithGitpod from '../components/index/ProductivityWithGitpod'
 
-const IndexPage: React.SFC<{}> = () => (
+const IndexPage: React.SFC<{}> = ({data}: any) => (
   <IndexLayout canonical="/">
-    <Banner />
+    <Banner screenshot={data.screenshot.childImageSharp.fluid} />
 
     <TrustedBy
       title={<>Trusted by <strong>Visionary Teams</strong></>}
@@ -149,4 +150,17 @@ const IndexPage: React.SFC<{}> = () => (
   </IndexLayout>
 )
 
+
 export default IndexPage
+
+export const query = graphql`
+    query {
+        screenshot: file(relativePath: { eq: "screenshot.png" }) {
+            childImageSharp {
+                fluid(quality: 100, maxWidth: 1980) {
+                    ...GatsbyImageSharpFluid
+                }
+            }
+        }
+    }
+`