Traced/primitive svg previews

gatsby-config.js

@@ -4,6 +4,7 @@ module.exports = {
   pathPrefix: '/gatsby-contentful-starter',
   plugins: [
     'gatsby-transformer-remark',
+    'gatsby-transformer-sqip',
     'gatsby-plugin-react-helmet',
     {
       resolve: 'gatsby-source-contentful',

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "contentful-import": "^6.2.0",
+    "gatsby-image": "^1.0.39",
     "gatsby-link": "^1.6.34",
     "gatsby-plugin-react-helmet": "^1.0.8",
     "gatsby-source-contentful": "^1.3.38",

src/components/article-preview.js

@@ -1,10 +1,18 @@
 import React from 'react'
 import styles from './article-preview.module.css'
 import Link from 'gatsby-link'
+import Img from 'gatsby-image'
 
 export default ({ article }) => (
   <div className={styles.preview}>
-    <img src={`${article.heroImage.file.url}?fit=scale&w=350&h=196`} alt="" />
+    <Img
+      className={styles.heroImage}
+      sizes={{
+        ...article.heroImage.responsiveSizes,
+        base64: article.heroImage.sqip
+      }}
+      alt=""
+    />
     <h3 className={styles.previewTitle}>
       <Link to={`/blog/${article.slug}`}>{article.title}</Link>
     </h3>

src/components/hero.js

@@ -1,11 +1,15 @@
 import React from 'react'
+import Img from "gatsby-image";
 import styles from './hero.module.css'
 
 export default ({ person }) => (
   <div className={styles.hero}>
-    <img
+    <Img
       className={styles.heroImage}
-      src={`${person.node.image.file.url}?w=1180&h=600&fit=pad&bg=rgb:000000`}
+      sizes={{
+        ...person.node.image.responsiveSizes,
+        base64: person.node.image.sqip
+      }}
       alt=""
     />
     <div className={styles.heroDetails}>

src/pages/index.js

@@ -46,7 +46,13 @@ export const pageQuery = graphql`
           heroImage {
             file {
               url
-            }
+            },
+            responsiveSizes(maxWidth: 350, maxHeight: 196, resizingBehavior: SCALE) {
+              srcSet,
+              sizes,
+              aspectRatio
+            },
+            sqip(numberOfPrimitives: 25, blur: 0, width: 350, height: 196, resizingBehavior: SCALE)
           }
           description {
             childMarkdownRemark {
@@ -69,6 +75,12 @@ export const pageQuery = graphql`
               url
               fileName
               contentType
+            },
+            sqip(numberOfPrimitives: 50, blur: 1, width: 1180, height: 480, resizingBehavior: PAD, background: "rgb:000000"),
+            responsiveSizes(maxWidth: 1180, maxHeight: 480, resizingBehavior: PAD, background: "rgb:000000") {
+              srcSet,
+              sizes,
+              aspectRatio
             }
           }
         }