Because the post Gatsby descrete notes is too long, I write a separate post just for images in Gatsby.

Rule of thumb

• Static images (icon, logo, favicon): just import and use img.
• svg cannot be used with childImageSharp, just use <img> with its publicURL.
• png, jpg can be used with <Img> and childImageSharp.
• Data can be used: json or yaml, cannot use js for images.
• List of images are get up to edges. After edges, there are a loop of nodes.
• query components must placed in <StaticQuery />.
• Different screen solution: use fixed.
• Different screen size: use fluid.
• Use http://localhost:8000/___graphql to check the query.
• Use {condition && condition && output} instead of using if..else...
• The relative path of images is compared with the path of data file where the urls are indicated.

Type of images to be processed

Read this post from CSS-Tricks to know which images should be processed, which ones should not.

• No processing required: "static images", icons and logos, favicons 👉 We can import and use <img> to directly import them.
• Process required: PNG, JPG files, gallery, ...

Single photo

Install stuffs following this doc,

npm install --save gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp