title: How people use gatsby-image in real world?
body: <p>I've been following this tutorial <a href="https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images" rel="nofollow noreferrer">https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images</a> but there is no way normal people would write 50 lines of code for adding an image:</p>
  <pre><code>import React from &quot;react&quot;
  import { graphql } from &quot;gatsby&quot;
  import Img from &quot;gatsby-image&quot;
  
  export default ({ data }) =&gt; {
    // Set up the array of image data and `media` keys.
    // You can have as many entries as you'd like.
    const sources = [
      data.mobileImage.childImageSharp.fluid,
      {
        ...data.desktopImage.childImageSharp.fluid,
        media: `(min-width: 768px)`,
      },
    ]
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Hello art-directed gatsby-image&lt;/h1&gt;
        &lt;Img fluid={sources} /&gt;
      &lt;/div&gt;
    )
  }
  
  export const query = graphql`
    query {
      mobileImage: file(relativePath: { eq: &quot;blog/avatars/kyle-mathews.jpeg&quot; }) {
        childImageSharp {
          fluid(maxWidth: 1000, quality: 100) {
            ...GatsbyImageSharpFluid
          }
        }
      }
      desktopImage: file(
        relativePath: { eq: &quot;blog/avatars/kyle-mathews-desktop.jpeg&quot; }
      ) {
        childImageSharp {
          fluid(maxWidth: 2000, quality: 100) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `
  </code></pre>
  <p>My question is, how can you keep your sanity and use images with gatsby?</p>
  <p>This example has many issues:</p>
  <ul>
  <li>Import and usage are far away, idealy should be close (therefore if you remove from html, you need to remember to delete from graphql)</li>
  <li>Amount of boilerplate is huge. Imagine you need 2 images...</li>
  <li>No auto complete when importing images. Devs really type the full path of the images? That seems a lot of work. Renaming looks risky too. (I'm using intellij.)</li>
  </ul>
  <hr />
  <p>For anyone else using typescript and wants to improve perf a bit by filtering only for images :</p>
  <pre class="lang-js prettyprint-override"><code>import {graphql, useStaticQuery} from 'gatsby'
  import Img from 'gatsby-image'
  import React from 'react'
  
  interface Props {
    // @todo: convert to enum
    relativePath: string;
    alt: string;
  }
  
  export const Image: React.FC&lt;Props&gt; = (props) =&gt; {
    const {relativePath, alt} = props
  
    const images: { data: { edges: Array&lt;{ node: { relativePath: string, default: { fluid: any } } }&gt; } } = useStaticQuery(graphql`
      query ImageQuery {
        data: allFile(filter: {sourceInstanceName: {eq:&quot;images&quot;}}) {
          edges {
            node {
              relativePath
              default: childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `)
  
    const image = images.data.edges.find(n =&gt; {
      return n.node.relativePath.includes(relativePath)
    })
  
    if (!image) {
      throw new Error(`Image not found`)
    }
  
    return (
      &lt;Img alt={alt} fluid={image.node.default.fluid} /&gt;
    )
  }
  </code></pre>
  <hr />
  <p>To add sourceInstanceName</p>
  <pre><code>/**
   * From:
   *  - https://github.com/ChristopherBiscardi/gatsby-mdx/issues/105
   *  - https://github.com/gatsbyjs/gatsby/issues/1634
   */
  export const onCreateNode = ({ node, getNode, actions }) =&gt; {
    const { createNodeField } = actions
    if (node.internal.type === `MarkdownRemark`) {
      const parent = getNode(node.parent)
      if (parent.internal.type === 'File') {
        createNodeField({
          name: `sourceInstanceName`,
          node,
          value: parent.sourceInstanceName,
        })
      }
    }
  }
  
  </code></pre>
  <p>and plugin config</p>
  <pre><code>    {
        resolve: `gatsby-source-filesystem`,
        options: {
          path: props.imageRootFolder,
          name: 'images',
        },
      },
  </code></pre>