Gatsby was named the #1 new technology to learn in 2020!
To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.
Over 3,000 web developers have registered for the challenge! Learn more about #100DaysOfGatsby here!
Challenge 3: Learn How to Use Images with Gatsby
Gatsby sites are known for their blazing fast speed. The way a Gatsby site optimizes images is a big reason for that.
This week’s challenge invites you to add images to your blog and learn about a popular and powerful Gatsby feature, gatsby-image.
Part 1
Add images to your markdown-based blog posts. If you are doing each challenge sequentially, then you have a Gatsby blog that uses markdown for blog posts, and is deployed live to a CDN.
But what good is a blog without beautiful images? We want you to use the resources section below to add auto-optimized images to your markdown blog posts!
Part 2
Now it’s time to get direct experience using the ImgReact component provided by gatsby-image! Create an about page using JSX, then use the gatsby-image API to transform a normal selfie into a square, black-and-white image.
Bonus: Take note of the build times for your site before and after you add images to your project. Also, record the performance of specific pages with images, using a tool like Lighthouse. As a Gatsby Developer you should be aware of how images affect your site’s production and user experience.
Challenge Resources
Part 1 Resource
Follow this tutorial that explains how to add images to your markdown-based pages. After you configure your site as outlined, Gatsby will auto-optimize your images for you.
Part 2 Resource
Create an About page using JSX, the preferred templating language for React. After that, you can learn about gatsby-image, then use its API to transform your selfie into a black-and-white square.
How to Get Help
Depending on your experience with Gatsby and React, this may be the hardest challenge we’ve given you. So, if you get stuck, please ask for help from the Gatsby community and the ASKGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, Spectrum, and Dev.
Have fun! We can’t wait to see what you build!