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.%
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!