migrate to gatsby-plugin-image

gatsby-config.js

@@ -23,6 +23,7 @@ module.exports = {
   },
   plugins: [
     ...sources,
+    'gatsby-plugin-image',
     {
       resolve: 'gatsby-plugin-sharp',
       options: {

package-lock.json

@@ -22,9 +22,9 @@
         "feather-icons": "^4.28.0",
         "fraction.js": "^4.0.13",
         "gatsby": "^3.0.3",
-        "gatsby-image": "^3.0.0",
         "gatsby-plugin-catch-links": "^3.0.0",
         "gatsby-plugin-feed": "^3.0.0",
+        "gatsby-plugin-image": "^1.0.0",
         "gatsby-plugin-lunr": "^1.5.2",
         "gatsby-plugin-manifest": "^3.0.0",
         "gatsby-plugin-matomo": "^0.9.0",
@@ -5981,6 +5981,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/babel-jsx-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.0.1.tgz",
+      "integrity": "sha512-Qph/atlQiSvfmkoIZ9VA+t8dA0ex2TwL37rkhLT9YLJdhaTMZ2HSM2QGzbqjLWanKA+I3wRQJjjhtuIEgesuLw=="
+    },
     "node_modules/babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
@@ -13424,20 +13429,6 @@
         "node": ">=12.13.0"
       }
     },
-    "node_modules/gatsby-image": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/gatsby-image/-/gatsby-image-3.0.0.tgz",
-      "integrity": "sha512-8Ma2ay4KAs9JR+Y2BiSw3jqiNLAAR4V1ZBC5Pjuf3fEzSONHjhOmZ7hOw8TzYHV32MQWYVFiOiHVHjLQDjH7jw==",
-      "deprecated": "This package has been deprecated in favor of gatsby-plugin-image. The migration guide can be found here: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/.",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "object-fit-images": "^3.2.4",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=12.13.0"
-      }
-    },
     "node_modules/gatsby-legacy-polyfills": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gatsby-legacy-polyfills/-/gatsby-legacy-polyfills-1.0.0.tgz",
@@ -13520,6 +13511,68 @@
         "react-dom": "^16.9.0 || ^17.0.0"
       }
     },
+    "node_modules/gatsby-plugin-image": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.0.0.tgz",
+      "integrity": "sha512-qPfydip7atF+rlESv1HLDmbwmmQvC8aU7W6GwO62hWcuGcIFJD3lcn6B8xF55f4rxE99vxbO5gUwRUwj+fUH1A==",
+      "dependencies": {
+        "@babel/parser": "^7.12.5",
+        "@babel/traverse": "^7.12.5",
+        "babel-jsx-utils": "^1.0.1",
+        "babel-plugin-remove-graphql-queries": "^3.0.0",
+        "camelcase": "^5.3.1",
+        "chokidar": "^3.5.1",
+        "common-tags": "^1.8.0",
+        "fs-extra": "^8.1.0",
+        "gatsby-core-utils": "^2.0.0",
+        "objectFitPolyfill": "^2.3.0",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "gatsby": "^3.0.0-next.0",
+        "gatsby-plugin-sharp": "^3.0.0-next.0",
+        "gatsby-source-filesystem": "^3.0.0-next.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0"
+      }
+    },
+    "node_modules/gatsby-plugin-image/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/gatsby-plugin-image/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/gatsby-plugin-image/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/gatsby-plugin-image/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/gatsby-plugin-lunr": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-lunr/-/gatsby-plugin-lunr-1.5.2.tgz",
@@ -22381,11 +22434,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-fit-images": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/object-fit-images/-/object-fit-images-3.2.4.tgz",
-      "integrity": "sha512-G+7LzpYfTfqUyrZlfrou/PLLLAPNC52FTy5y1CBywX+1/FkxIloOyQXBmZ3Zxa2AWO+lMF0JTuvqbr7G5e5CWg=="
-    },
     "node_modules/object-inspect": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
@@ -22544,6 +22592,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/objectFitPolyfill": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/objectFitPolyfill/-/objectFitPolyfill-2.3.5.tgz",
+      "integrity": "sha512-8Quz071ZmGi0QWEG4xB3Bv5Lpw6K0Uca87FLoLMKMWjB6qIq9IyBegP3b/VLNxv2WYvIMGoeUQ+c6ibUkNa8TA=="
+    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -39091,6 +39144,11 @@
         }
       }
     },
+    "babel-jsx-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/babel-jsx-utils/-/babel-jsx-utils-1.0.1.tgz",
+      "integrity": "sha512-Qph/atlQiSvfmkoIZ9VA+t8dA0ex2TwL37rkhLT9YLJdhaTMZ2HSM2QGzbqjLWanKA+I3wRQJjjhtuIEgesuLw=="
+    },
     "babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
@@ -45035,16 +45093,6 @@
         "@babel/runtime": "^7.12.5"
       }
     },
-    "gatsby-image": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/gatsby-image/-/gatsby-image-3.0.0.tgz",
-      "integrity": "sha512-8Ma2ay4KAs9JR+Y2BiSw3jqiNLAAR4V1ZBC5Pjuf3fEzSONHjhOmZ7hOw8TzYHV32MQWYVFiOiHVHjLQDjH7jw==",
-      "requires": {
-        "@babel/runtime": "^7.12.5",
-        "object-fit-images": "^3.2.4",
-        "prop-types": "^15.7.2"
-      }
-    },
     "gatsby-legacy-polyfills": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gatsby-legacy-polyfills/-/gatsby-legacy-polyfills-1.0.0.tgz",
@@ -45101,6 +45149,54 @@
         "rss": "^1.2.2"
       }
     },
+    "gatsby-plugin-image": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.0.0.tgz",
+      "integrity": "sha512-qPfydip7atF+rlESv1HLDmbwmmQvC8aU7W6GwO62hWcuGcIFJD3lcn6B8xF55f4rxE99vxbO5gUwRUwj+fUH1A==",
+      "requires": {
+        "@babel/parser": "^7.12.5",
+        "@babel/traverse": "^7.12.5",
+        "babel-jsx-utils": "^1.0.1",
+        "babel-plugin-remove-graphql-queries": "^3.0.0",
+        "camelcase": "^5.3.1",
+        "chokidar": "^3.5.1",
+        "common-tags": "^1.8.0",
+        "fs-extra": "^8.1.0",
+        "gatsby-core-utils": "^2.0.0",
+        "objectFitPolyfill": "^2.3.0",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "universalify": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+        }
+      }
+    },
     "gatsby-plugin-lunr": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-lunr/-/gatsby-plugin-lunr-1.5.2.tgz",
@@ -51776,11 +51872,6 @@
         }
       }
     },
-    "object-fit-images": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/object-fit-images/-/object-fit-images-3.2.4.tgz",
-      "integrity": "sha512-G+7LzpYfTfqUyrZlfrou/PLLLAPNC52FTy5y1CBywX+1/FkxIloOyQXBmZ3Zxa2AWO+lMF0JTuvqbr7G5e5CWg=="
-    },
     "object-inspect": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
@@ -51889,6 +51980,11 @@
         "has": "^1.0.3"
       }
     },
+    "objectFitPolyfill": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/objectFitPolyfill/-/objectFitPolyfill-2.3.5.tgz",
+      "integrity": "sha512-8Quz071ZmGi0QWEG4xB3Bv5Lpw6K0Uca87FLoLMKMWjB6qIq9IyBegP3b/VLNxv2WYvIMGoeUQ+c6ibUkNa8TA=="
+    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",

package.json

@@ -42,9 +42,9 @@
     "feather-icons": "^4.28.0",
     "fraction.js": "^4.0.13",
     "gatsby": "^3.0.3",
-    "gatsby-image": "^3.0.0",
     "gatsby-plugin-catch-links": "^3.0.0",
     "gatsby-plugin-feed": "^3.0.0",
+    "gatsby-plugin-image": "^1.0.0",
     "gatsby-plugin-lunr": "^1.5.2",
     "gatsby-plugin-manifest": "^3.0.0",
     "gatsby-plugin-matomo": "^0.9.0",

src/@types/Image.d.ts

@@ -1,18 +1,14 @@
-import { FixedObject, FluidObject } from 'gatsby-image'
+import { GatsbyImageProps, IGatsbyImageData } from 'gatsby-plugin-image'
 
-export interface ImageProps {
+export interface ImageProps extends GatsbyImageProps {
   title?: string
-  fluid?: FluidObject
-  fixed?: FixedObject
-  alt?: string
   original?: { src: string }
   className?: string
 }
 
-export interface ImageNode {
+export interface ImageNode extends IGatsbyImageData {
-  childImageSharp: ImageProps
+  fields?: {
-  fields: {
+    exif?: Exif
-    exif: Exif
   }
 }
 

src/components/atoms/Image.tsx

@@ -1,13 +1,12 @@
 import React, { ReactElement } from 'react'
 import { graphql } from 'gatsby'
-import Img from 'gatsby-image'
+import { GatsbyImage } from 'gatsby-plugin-image'
 import { ImageProps } from '../../@types/Image'
 import * as styles from './Image.module.css'
 
 export const Image = ({
   title,
-  fluid,
+  image,
-  fixed,
   alt,
   original,
   className
@@ -16,13 +15,7 @@ export const Image = ({
     className={`${styles.image} ${className ? className : ''}`}
     data-original={original && original.src}
   >
-    <Img
+     <GatsbyImage backgroundColor="transparent" image={image} alt={alt} />
-      backgroundColor="transparent"
-      fluid={fluid}
-      fixed={fixed}
-      alt={alt}
-      imgStyle={{ objectFit: 'contain' }}
-    />
     {title && <figcaption className={styles.imageTitle}>{title}</figcaption>}
   </figure>
 )
@@ -32,9 +25,7 @@ export const imageSizeDefault = graphql`
     original {
       src
     }
-    fluid(maxWidth: 950, quality: 85) {
+    gatsbyImageData(layout: CONSTRAINED, width: 950, quality: 85)
-      ...GatsbyImageSharpFluid_withWebp_noBase64
-    }
   }
 `
 
@@ -43,9 +34,7 @@ export const imageSizeThumb = graphql`
     original {
       src
     }
-    fluid(maxWidth: 420, maxHeight: 140, quality: 85, cropFocus: CENTER) {
+    gatsbyImageData(layout: CONSTRAINED, width: 420, height: 140, quality: 85)
-      ...GatsbyImageSharpFluid_withWebp_noBase64
-    }
   }
 `
 
@@ -54,8 +43,6 @@ export const photoSizeThumb = graphql`
     original {
       src
     }
-    fluid(maxWidth: 300, maxHeight: 300, quality: 85, cropFocus: CENTER) {
+    gatsbyImageData(layout: CONSTRAINED, width: 300, height: 300, quality: 85)
-      ...GatsbyImageSharpFluid_withWebp_noBase64
-    }
   }
 `

src/components/atoms/SEO/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
-
+import { getSrc } from 'gatsby-plugin-image'
 import { useSiteMetadata } from '../../../hooks/use-site-metadata'
 import { Post } from '../../../@types/Post'
 import MetaTags from './MetaTags'
@@ -39,9 +39,7 @@ export default function SEO({
     const postMeta = post.frontmatter
     title = `${postMeta.title} ¦ ${siteTitle}`
     description = postMeta.description ? postMeta.description : post.excerpt
-    image = postMeta.image
+    image = postMeta.image ? getSrc(postMeta.image) : `/${logo}`
-      ? postMeta.image.childImageSharp.fluid.src
-      : `/${logo}`
     postURL = `${siteUrl}${slug}`
   } else {
     title = `${siteTitle} ¦ ${siteDescription}`

src/components/molecules/PostTeaser.tsx

@@ -47,7 +47,7 @@ export default function PostTeaser({
       onClick={toggleSearch && toggleSearch}
     >
       {image ? (
-        <Image fluid={image.childImageSharp.fluid} alt={title} />
+        <Image image={image} alt={title} />
       ) : (
         <span className={styles.empty} />
       )}

src/components/molecules/Vcard.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
-import Img from 'gatsby-image'
+import { getSrc } from 'gatsby-plugin-image'
 import IconLinks from './Networks'
 import * as styles from './Vcard.module.css'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
@@ -11,9 +11,12 @@ const query = graphql`
       edges {
         node {
           childImageSharp {
-            fixed(width: 80, height: 80, quality: 90) {
+            gatsbyImageData(
-              ...GatsbyImageSharpFixed_withWebp_noBase64
+              layout: CONSTRAINED
-            }
+              width: 80
+              height: 80
+              quality: 85
+            )
           }
         }
       }
@@ -25,12 +28,18 @@ export default function Vcard(): ReactElement {
   const data = useStaticQuery(query)
   const { author, rss, jsonfeed } = useSiteMetadata()
   const { twitter, github, name, uri } = author
-  const avatar = data.avatar.edges[0].node.childImageSharp.fixed
+  const avatar = getSrc(data.avatar.edges[0].node)
   const links = [twitter, github, rss, jsonfeed]
 
   return (
     <>
-      <Img className={styles.avatar} fixed={avatar} alt="avatar" />
+      <img
+        className={styles.avatar}
+        src={avatar}
+        width="80"
+        height="80"
+        alt="avatar"
+      />
       <p className={styles.description}>
         Blog of designer &amp; developer{' '}
         <a className="fn" rel="author" href={uri}>