Best practice for importing static images into GatsbyJS to ensure lazyloading/scaling. If image is responsive (like background cover image), use sizes property instead of resolutions in query and <Img /> component. See: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image

gatsby-image-example.js

import React, { Component } from "react";
import Img from "gatsby-image";

export default class Frontpage extends Component {
  render() {
    return (
      <div className="Frontpage pt2">
        <Img resolutions={this.props.data.PeaceEmoji.resolutions} alt="Peace sign emoji" />
      </div>
    );
  }
};

export const query = graphql`
  query IndexQuery {
    PeaceEmoji: imageSharp (id: { regex: "/peace.png/" }) {
          ...emojiImageFields
    },
  }

  fragment emojiImageFields on ImageSharp {
    resolutions(width: 54, height: 54) {
      ...GatsbyImageSharpResolutions
    }
  }
`;