Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

  • Gatsbyjs.com
    Gatsbyjs.com
  • Gatsby Cloud
    Gatsby Cloud
  • Documentation
    Documentation
  • Support
    Support
  • Contact
    Contact
  • Log in
    Log in
docs
    • Tutorial
      Tutorial
    • How-to Guides
      How-to Guides
    • Reference
      Reference
    • Conceptual Guide
      Conceptual Guide
    • Quick Start
      Quick Start
    • v3

      • v4 (beta)

        v4 (beta)

      • v3

        v3

      • v2

        v2

      • v1

        v1

DocumentationHow-to Guides
Docs

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 3

Assets from filesystem→

There are two major ways to import assets, such as images, fonts, and files, into a Gatsby site.

Gatsby Image Plugin→

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.

Static folder→

An escape hatch for adding assets outside of the module system

 Additional Guides 5

  • Load a video
  • Load a GIF
  • Working with other media types
  • Using Gatsby Image with Remote Images
  • Using Cloudinary for image transforms
  • Accessibility Statement
  • Code of Conduct
  • Logo & Assets
  • Privacy Policy
  Docs
  • How-to Guides
    • Overview
    • Overview
    • Assets from filesystem
    • Gatsby Image Plugin
    • Static folder
    • Additional Guides 5