optimized images

gatsby-config.js

@@ -31,10 +31,30 @@ module.exports = {
     ]
   },
   plugins: [
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-sass',
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        path: `${__dirname}/static/assets`,
+        name: 'assets',
+      },
+    },
+    "gatsby-plugin-sharp",
+		"gatsby-transformer-sharp",
     {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
+          {
+            resolve: `gatsby-remark-relative-images`,
+            options: {
+              name: "assets"
+            }
+          },
+          {
+            resolve: `gatsby-remark-images`,
+          },
           {
             resolve: `gatsby-remark-autolink-headers`,
             options: {
@@ -76,7 +96,7 @@ module.exports = {
               },
               escapeEntities: {},
             },
-          },
+          }
         ],
       },
     },
@@ -96,7 +116,5 @@ module.exports = {
       }
     },
     'gatsby-plugin-netlify-cms',
-    'gatsby-plugin-react-helmet',
-    'gatsby-plugin-sass'
   ],
 }

gatsby-node.js

@@ -1,3 +1,4 @@
+const { fmImagesToRelative } = require('gatsby-remark-relative-images');
 const path = require('path')
 
 exports.createPages = ({ actions, graphql }) => {
@@ -32,3 +33,7 @@ exports.createPages = ({ actions, graphql }) => {
 
   })
 }
+
+exports.onCreateNode = ({ node }) => {
+  fmImagesToRelative(node);
+};

package.json

@@ -17,14 +17,19 @@
   "dependencies": {
     "@reach/router": "^1.3.4",
     "gatsby": "^2.23.12",
+    "gatsby-image": "^2.4.12",
     "gatsby-plugin-netlify-cms": "^4.3.9",
     "gatsby-plugin-react-helmet": "^3.3.8",
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sass": "^2.3.7",
+    "gatsby-plugin-sharp": "^2.6.17",
     "gatsby-remark-autolink-headers": "^2.3.10",
+    "gatsby-remark-images": "^3.3.17",
     "gatsby-remark-prismjs": "^3.5.9",
+    "gatsby-remark-relative-images": "^0.3.0",
     "gatsby-source-filesystem": "^2.3.18",
     "gatsby-transformer-remark": "^2.8.23",
+    "gatsby-transformer-sharp": "^2.5.10",
     "netlify-cms-app": "^2.12.16",
     "node-sass": "^4.14.1",
     "prismjs": "^1.20.0",

src/components/Article/Article.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import SEO from '../SEO/SEO'
+import Img from "gatsby-image"
 import { Link } from 'gatsby'
 import './Article.scss'
 
@@ -61,7 +62,7 @@ const Article = ({ data: { title, image, description, category, tags, time, date
             </div>)}
           </div>
           <div className="article-image">
-            <img src={image} alt={title} />
+            <Img fluid={image.childImageSharp.fluid} alt={title} />
           </div>
           <div className="article-inner inner">
             <div dangerouslySetInnerHTML={{__html: html}}></div>

src/components/Articles/ArticleCard/ArticleCard.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Img from "gatsby-image"
 import { Link } from 'gatsby'
 import './ArticleCard.scss'
 
@@ -7,7 +8,7 @@ const ArticleCard = ({ data: { slug, title, image, category, description, tags }
     <article className="article-card">
       <div className="article-card__image">
         <Link to={`/article/${slug}`}>
-          <img src={image} alt={title} />
+          <Img fluid={image.childImageSharp.fluid} alt={title} />
         </Link>
       </div>
       <div className="article-card__heading">

src/hooks/useMoreArticlesQuery.js

@@ -9,7 +9,13 @@ const useMoreArticlesQuery = () => {
             frontmatter {
               slug
               title
-              image
+              image {
+                childImageSharp {
+                  fluid {
+                    ...GatsbyImageSharpFluid
+                  }
+                }
+              }
               category
               tags
               description

src/pages/articles.js

@@ -80,7 +80,13 @@ export const query = graphql`
           frontmatter {
             slug
             title
-            image
+            image {
+              childImageSharp {
+                fluid {
+                  ...GatsbyImageSharpFluid
+                }
+              }
+            }
             category
             tags
             description

src/pages/index.js

@@ -49,7 +49,13 @@ export const query = graphql`
           frontmatter {
             slug
             title
-            image
+            image {
+              childImageSharp {
+                fluid {
+                  ...GatsbyImageSharpFluid
+                }
+              }
+            }
             category
             tags
             description

src/templates/articleTemplate.js

@@ -37,7 +37,13 @@ export const pageQuery = graphql`
       frontmatter {
         slug
         title
-        image
+        image {
+          childImageSharp {
+            fluid {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
         time
         tags
         description