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.
Instructor: [0:00] Begin by installing two plugins, gatsby-plugin-image and gatsby-plugin-sharp. Make sure to add both of them to your gatsby-config file. They don't require any additional options.
[0:25] Go to your index.js file. Import { StaticImage } from 'gatsby-plugin-image'. Use the StaticImage component to display a preprocessed image. We can pass it a source, in this case a URL, to an image. It can also take a relative path. Add an alt tag. This is "Sunset on the beach."
[1:04] Choose a layout. By default, it's constraint. We're going to choose full-width, which is for images designed to be hero images, or the full width of the screen.
[1:15] We'll also add an aspect ratio that will crop the image movie-style, 21:9. You may need to restart your develop process to see.%