Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Learn how to add optimized images to your Gatsby site with the `gatsby-image` plugin.

These videos dive into:

- installing and configuring plugin options
- sourcing images to be queried via GraphQL
- displaying traced-svg or "blurred-up" images
- different image types supported by `gatsby-image`
- as well as alternatives for using images in Gatsby

Learn how to install and setup gatsby-image plugins to source local images from the filesystem so you can query them with GraphQL, and then use them in your site.

- [Using gatsby-image with your site](https://www.gatsbyjs.org/tutorial/gatsby-image-tutorial/) 
- [gatsby-image documentation](https://www.gatsbyjs.org/packages/gatsby-image)

Install gatsby-image and source local images from the filesystem

Learn how to import an image into a component using webpack (don't worry, you won't be in any config files), the simplest recommended approach to adding a single image.

- [Gatsby documentation](https://www.gatsbyjs.org/docs/recipes/#import-an-image-into-a-component-with-webpack)


Import a Local Image into a Gatsby Component with webpack

Learn how to use image from the filesystem at a relative path with the gatsby-image plugin.

- [Written recipe for this video](https://www.gatsbyjs.org/docs/recipes/#optimizing-and-querying-local-images-with-gatsby-image)
- [Gatsby documentation](https://www.gatsbyjs.org/docs/using-gatsby-image/)

Use gatsby-image with an image from a relative path

Learn how to simplify the fields you include in your queries for image data by using GraphQL fragments. With this powerful abstraction, changing the fragment will change the behavior of your image, loading it as a minified blurred file or traced svg before loading the full size image when the rest of the content loads.

- [List of built in fragments](https://www.gatsbyjs.org/docs/gatsby-image/#image-query-fragments)
- [Using GraphQL fragments in Gatsby](https://www.gatsbyjs.org/docs/using-fragments/)

Use gatsby-image's GraphQL fragments for blurred-up and traced SVG images

Learn how to import static assets into components in alternative scenarios when it might be necessary, like if you couldn't use webpack.

[Assets added to the static folder won't leverage Gatsby's performance optimizations](https://www.gatsbyjs.org/docs/static-folder/#downsides) so this isn't a recommended approach, and should be used as an escape hatch.

- [Gatsby documentation on adding an image from the static folder](https://www.gatsbyjs.org/docs/recipes/#reference-an-image-from-the-static-folder)

Use a local image from the static folder in a Gatsby component

Learn how to query multiple local images so they can easily be displayed on a Gatsby site side-by-side.

- [Written steps](https://www.gatsbyjs.org/docs/recipes/#optimizing-and-querying-local-images-with-gatsby-image) related to this video
- [Working with images in Gatsby](https://www.gatsbyjs.org/docs/working-with-images/)

Image Loading and Optimization in Gatsby with gatsby-image

Kyle Gill

Free Community Resource

Free Community Resource

Course Content