Coursera Cuts Jobs Despite $100M Revenue Milestone

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

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

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.