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.

 Additional Guides 4

  • Using the Static Folder
  • Working with other media types
  • Using Gatsby Image with Remote Images
  • Using Cloudinary for image transforms