Now 100x Faster

Read the latest from Gatsby CTO Kyle Mathews Re-introducing Gatsby, a Reactive Site Generator

ContactSign Up for Free

Challenge 3 – Auto-Optimize Images on Your Gatsby Site

Hashim Warren
January 14th, 2020

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, and Dev.

Have fun! We can't wait to see what you build!

Share on TwitterShare on LinkedInShare on FacebookShare via Email

Full Stack Marketer, writing copy and code - https://www.configmag.com

Follow Hashim Warren on Twitter

Tagged with 100-Days-of-Gatsby, contest, learning-to-codeView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2022 Gatsby, Inc.