Image Component - OOOH, we added props!

The Gatsby <Image> component is a really powerful image solution.

Built-in, it comes with:

• Responsive Images
• Lazy Loading
• Image Optimisation
• Blur-up technique so pages don't jump as images load

To use it:

• Place your image(s) into the src/images directory
• import the Image component at the top of your file
• Add a GraphQL Query to the component you want to place the image in
• Add the image using the <Image component

• This image is 4.2MB in the repo. Gatsby renders it as 134kb. WIN!

  

• This image is 4.6MB in the repo. Gatsby renders it as 91kb. ANOTHER WIN!