Outline
We now know how to import images and how to use images in the static assets folder. These approaches work, but they're not ideal. We have to manually consider optimization, accessibility, and things like placeholder images.
It turns out Gatsby provides a much better way called Gatsby Image. Gatsby Image is a library that uses the Sharp image library under the hood and does a lot of optimization work for you.
To get started, let's install what we'll need:
npm install --save gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp
This will install the gatsby-image library as well as two plugins we'll be using throughout the course.
Since we're adding plugins, we'll need to configure it in gatsby-config.js. Let's do that in the next video.