gatsby-image docs (gatsbyjs#3500)

* Update CONTRIBUTING.md

small typo

* Update README.md

typo fixes and additional section

* Update awesome-gatsby.md

* Update README.md

CONTRIBUTING.md

@@ -65,7 +65,7 @@ a pull request.
   additions or modifications here.
 * Make sure to double check your grammar and capitalise correctly.
 * Commit and push to your fork.
-* Create an pull request from your branch.
+* Create a pull request from your branch.
 
 ## Development tools
 

docs/docs/awesome-gatsby.md

@@ -19,3 +19,4 @@ A curated list of interesting Gatsby community projects and learning resources.
 * [Egghead course — "Build a Blog with React and Markdown using Gatsby"](https://egghead.io/courses/build-a-blog-with-react-and-markdown-using-gatsby)
 * [Build a photo site with Gatsby — 6 part tutorial](https://jeremey.blog/gatsby-photo/)
 * [Blazing fast website with Gatsby and Contentful series](https://www.youtube.com/watch?v=Ek4o40w1tH4&list=PL8KiuH6vpACV-F7jXribe4YveGBhBeG9A)
+* [Image Optimization Made Easy with Gatsby.js](https://medium.com/@kyle.robert.gill/ridiculously-easy-image-optimization-with-gatsby-js-59d48e15db6e)

packages/gatsby-image/README.md

@@ -31,7 +31,7 @@ Ideally you would:
   show a preview of the image while it loads
 * Hold the image position so your page doesn't jump while images load
 
-Doing this consistantly across a site feels like sisyphean labor. You manually
+Doing this consistently across a site feels like sisyphean labor. You manually
 optimize your images and then… several images are swapped in at the last minute
 or a design-tweak shaves 100px of width off your images.
 
@@ -56,6 +56,27 @@ The GraphQL query creates multiple thumbnails with optimized JPEG and PNG
 compression. The `gatsby-image` component automatically sets up the "blur-up"
 effect as well as lazy loading of images further down the screen.
 
+## Install
+
+`npm install --save gatsby-image`
+
+Depending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config.
+
+```
+npm install --save gatsby-transformer-sharp
+npm install --save gatsby-plugin-sharp
+```
+
+Then in your `gatsby-config.js`:
+```
+plugins: [
+  `gatsby-transformer-sharp`,
+  `gatsby-plugin-sharp`
+];
+```
+
+## How to use
+
 This is what a component using `gatsby-images` looks like.
 
 ```jsx
@@ -84,6 +105,8 @@ export const query = graphql`
 `;
 ```
 
+For another explanation of how to get started with gatsby-image, see this blog post by community member Kyle Gill [Image Optimization Made Easy with Gatsby.js](https://medium.com/@kyle.robert.gill/ridiculously-easy-image-optimization-with-gatsby-js-59d48e15db6e)
+
 ## Two types of responsive images
 
 There are two types of responsive images supported by gatsby-image.