Coursera Plus Annual is 40% Off — Ends July 6.

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Image Loading and Optimization in Gatsby with gatsby-image

via egghead.io

Go to class Write review
Scrimba Ad

Free courses from frontend to fullstack and AI

Learn More → Coursera Ad

Learn AI, Data Science & Business — Earn Certificates That Get You Hired

Learn More →

Overview

AI, Data Science & Cloud Certificates from Google, IBM & Meta — 40% Off
One plan covers every Professional Certificate on Coursera. 40% off Coursera Plus Annual.
Unlock All Certificates
Learn how to add optimized images to your Gatsby site with the gatsby-image plugin.
These videos dive into:
installing and configuring plugin options
sourcing images to be queried via GraphQL
displaying traced-svg or "blurred-up" images
different image types supported by gatsby-image
as well as alternatives for using images in Gatsby

Syllabus

  • Install gatsby-image and source local images from the filesystem
  • Import a Local Image into a Gatsby Component with webpack
  • Use gatsby-image with an image from a relative path
  • Use gatsby-image's GraphQL fragments for blurred-up and traced SVG images
  • Use a local image from the static folder in a Gatsby component
  • Add multiple images from a directory with gatsby-image

Taught by

Kyle Gill

Reviews

Start your review of Image Loading and Optimization in Gatsby with gatsby-image

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.