diff --git a/docs/docs/querying-with-graphql.md b/docs/docs/querying-with-graphql.md
index 34f0b33b17079..5eddb46964d36 100644
--- a/docs/docs/querying-with-graphql.md
+++ b/docs/docs/querying-with-graphql.md
@@ -159,6 +159,33 @@ Gatsby has rich support for processing images. Responsive images are a big part
Combined with a special Gatsby image component, [gatsby-image](/packages/gatsby-image/), you have a very powerful set of primatives for building sites with images.
+This is what a component using `gatsby-image` looks like:
+
+```jsx
+import React from "react";
+import Img from "gatsby-image";
+
+export default ({ data }) => (
+
+
Hello gatsby-image
+
+
+);
+
+export const query = graphql`
+ query GatsbyImageSampleQuery {
+ file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
+ childImageSharp {
+ # Specify the image processing specifications right in the query.
+ # Makes it trivial to update as your page's design changes.
+ resolutions(width: 125, height: 125) {
+ ...GatsbyImageSharpResolutions
+ }
+ }
+ }
+ }
+`;
+
See also the following blog posts:
* [Making Website Building Fun](/blog/2017-10-16-making-website-building-fun/)
diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md
index bd850e352dea8..386bdce2f7abf 100644
--- a/packages/gatsby-image/README.md
+++ b/packages/gatsby-image/README.md
@@ -78,7 +78,7 @@ plugins: [
## How to use
-This is what a component using `gatsby-images` looks like.
+This is what a component using `gatsby-image` looks like:
```jsx
import React from "react";
@@ -95,7 +95,7 @@ export const query = graphql`
query GatsbyImageSampleQuery {
file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
childImageSharp {
- # Specify the image processing steps right in the query
+ # Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.
resolutions(width: 125, height: 125) {
...GatsbyImageSharpResolutions