Outline
Congratulations on learning how to work with images in Gatsby! You've come a long way.
Let's recap what we've learned in this tutorial. We first learned about importing images and the static asset folder, but we also learned why this is less than ideal for performance and accessibility. This led us to Gatsby Image, which lets us bring images into our GraphQL and handles a bunch of optimization for us. We also learned how Gatsby Image turns images into both fixed
and fluid
options depending on whether we want the image to resize with the page.
Once we had Gatsby Image under our belt, we learned how to use images in Markdown. There were a couple of things we needed to set up to configure gatsby-plugin-mdx
. Once that was done, we were able to use images both in frontmatter
of our Markdown and in-line with our Markdown text.
You're almost done with Up and Running with Gatsby! The final tutorial is about taking Gatsby to production Let's go!