YoVDO

Image Loading and Optimization in Gatsby with gatsby-image

Offered By: egghead.io

Tags

Gatsby Courses Web Development Courses GraphQL Courses Image Optimization Courses

Course Description

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

Related Courses

Software as a Service
University of California, Berkeley via Coursera
Intro to Computer Science
University of Virginia via Udacity
Web Development
Udacity
Software Engineering for SaaS
University of California, Berkeley via Coursera
CS50's Introduction to Computer Science
Harvard University via edX