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

Overview

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

4.9 rating at egghead.io based on 9 ratings

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

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.