Render Performant Images with the Gatsby StaticImage Component

StaticImage is a React component designed for one-off images that adheres to best practices for performant images in browsers.

For this lesson, install gatsby-plugin-image, gatsby-plugin-sharp, and gatsby-transformer-sharp. Now, use the StaticImage component to pass an image URL as the src, add an alt attribute with a description, choose a layout, and pass an aspectRatio to crop the image.

To learn more about the available props, see the gatsby-plugin-image README.