Adding Images and Media
Images and media are a key part of making websites rich and interactive. Gatsby offers tools to create rich experiences with gatsby-image, while preventing performance hits.
Main Guides 4
How to load an image from the filesystem→
There are two major ways to import assets, such as images, fonts, and files, into a Gatsby site.
How to use Gatsby Image→
Part of what makes Gatsby sites so fast is its recommended approach to handling images. `gatsby-image` is a React component designed to work seamlessly with Gatsby’s native image processing.
How to load a video→
The easiest method for including video on a Gatsby site is to source an uploaded file from a site like YouTube, Vimeo, or Twitch.
How to load a GIF→
When working with animated GIFs, you'll want to import them directly instead of using gatsby-image.