Image Loading and Optimization in Gatsby with gatsby-image
Offered By: egghead.io
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
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
30 Days to Learn LaravelLaracasts 3D Graphics for Web Developers
Pompeu Fabra University via FutureLearn A Beginner’s Guide to Web Development with HTML5
Packt via FutureLearn Accessibility Audit
Amazon Web Services via AWS Skill Builder Expanding Your JS Skills with Angular
A Cloud Guru