have it kinda working

data/projects.json

@@ -2,10 +2,10 @@
   {
     "title": "Ocean Protocol",
     "slug": "oceanprotocol",
-    "img": "oceanprotocol",
+    "img": "portfolio-oceanprotocol.png",
     "img_more": [
-      "oceanprotocol01",
-      "oceanprotocol02"
+      "portfolio-oceanprotocol-01.png",
+      "portfolio-oceanprotocol-02.png"
     ],
     "links": [
       {

gatsby-config.js

@@ -9,10 +9,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-sass',
       options: {
-        includePaths: [
-          `${__dirname}/node_modules`,
-          `${__dirname}/src/styles`
-        ],
+        includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`],
       },
     },
     {
@@ -49,5 +46,8 @@ module.exports = {
     'gatsby-plugin-react-next',
     'gatsby-plugin-react-helmet',
     'gatsby-transformer-json',
+    'gatsby-plugin-remove-trailing-slashes',
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-sharp',
   ],
 }

gatsby-node.js

@@ -56,12 +56,16 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
 
         result.data.allProjectsJson.edges.forEach(({ node, previous, next }) => {
             const slug = node.slug
+            const img = node.img
+            const img_more = node.img_more
 
             createPage({
               path: slug,
               component: template,
               context: {
                 slug,
+                img,
+                img_more,
                 previous,
                 next,
               },

package.json

@@ -14,15 +14,18 @@
   },
   "dependencies": {
     "gatsby": "^1.9.255",
+    "gatsby-image": "^1.0.47",
     "gatsby-link": "^1.6.41",
     "gatsby-plugin-google-analytics": "^1.0.31",
     "gatsby-plugin-react-helmet": "^2.0.11",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-remove-trailing-slashes": "^1.0.9",
     "gatsby-plugin-sass": "^1.0.26",
+    "gatsby-plugin-sharp": "^1.6.43",
     "gatsby-plugin-svgr": "^1.0.0",
-    "gatsby-source-filesystem": "^1.5.34",
+    "gatsby-source-filesystem": "^1.5.33",
     "gatsby-transformer-json": "^1.0.16",
+    "gatsby-transformer-sharp": "^1.6.23",
     "react-helmet": "^5.2.0",
     "react-markdown": "^3.3.0",
     "react-transition-group": "^2.3.1"

src/components/atoms/ProjectImage.jsx

@@ -1,6 +1,19 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import Img from 'gatsby-image'
 import './ProjectImage.scss'
 
-const ProjectImage = props => <img className="project__image" {...props} />
+const ProjectImage = ({ sizes, alt }) => (
+  <Img
+    className="project__image"
+    sizes={sizes}
+    alt={alt}
+  />
+)
+
+ProjectImage.propTypes = {
+  sizes: PropTypes.object.isRequired,
+  alt: PropTypes.string,
+}
 
 export default ProjectImage

src/components/organisms/Projects.jsx

@@ -2,26 +2,26 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import ProjectImage from '../atoms/ProjectImage'
-import images from '../../images'
 import './Projects.scss'
 
 const Projects = ({ data }) => {
   const projects = data.allProjectsJson.edges
+  const images = data.allImageSharp.edges
 
-  return (
-    <div className="projects full-width" id="projects">
-      {projects.map(({ node }) => (
-        <Link
-          key={node.slug}
-          to={`/${node.slug}`}
-          className="projects__project"
-        >
-          <h1 className="projects__project__title">{node.title}</h1>
-          <ProjectImage src={images[node.img]} alt={node.title} />
-        </Link>
-      ))}
+  return <div className="projects full-width" id="projects">
+      {projects.map(({ node }) => {
+        return (
+          <Link
+            key={node.slug}
+            to={`/${node.slug}`}
+            className="projects__project"
+          >
+            <h1 className="projects__project__title">{node.title}</h1>
+            <ProjectImage sizes={images} alt={node.title} />
+          </Link>
+        )
+      })}
     </div>
-  )
 }
 
 Projects.propTypes = {

src/pages/index.jsx

@@ -22,5 +22,12 @@ export const query = graphql`
         }
       }
     }
+    allImageSharp {
+      edges {
+        node {
+          id
+        }
+      }
+    }
   }
 `

src/templates/Project.jsx

@@ -41,17 +41,17 @@ class Project extends Component {
               className="project__description"
             />
 
-            <FullWidth>
-              <ProjectImage src={images[img]} alt={title} />
+            {/* <FullWidth>
+              <ProjectImage data={this.props.data.mainImage.childImageSharp} alt={title} />
             </FullWidth>
 
             {!!img_more && (
               <FullWidth>
                 {img_more.map(key => (
-                  <ProjectImage key={key} src={images[key]} alt={title} />
+                  <ProjectImage key={key} data={this.props.data.mainImage.childImageSharp} alt={title} />
                 ))}
               </FullWidth>
-            )}
+            )} */}
 
             <footer className="project__meta">
               {!!techstack && <ProjectTechstack techstack={techstack} />}
@@ -74,7 +74,7 @@ Project.propTypes = {
 export default Project
 
 export const projectQuery = graphql`
-  query ProjectBySlug($slug: String!) {
+  query ProjectBySlug($slug: String!, $img: String!) {
     projectsJson(slug: { eq: $slug }) {
       title
       slug
@@ -87,5 +87,12 @@ export const projectQuery = graphql`
       }
       techstack
     }
+    mainImage: file(relativePath: { eq: $img }) {
+      childImageSharp {
+        sizes(maxWidth: 1440) {
+          ...GatsbyImageSharpSizes
+        }
+      }
+    }
   }
 `