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

Exploring GraphQL: A Query Language for APIs
Linux Foundation via edX
Complete React Developer (w/ Redux, Hooks, GraphQL)
Udemy
Python Bootcamp: Learn, Code, Build
Udemy
The Modern GraphQL Bootcamp (with Node.js and Apollo)
Udemy
The complete NestJS developer. Enterprise Node.js framework
Udemy