Images, Files & Video in Gatsby

Gatsby provides multiple solutions for adding images, video, and files to your projects. And a pro tip: you don’t necessarily have to use GraphQL! From imports and use of the static folder to dynamic queries with Gatsby Image to prevent image bloat, you’ve got options.

This section will walk you through several common patterns for handling media with Gatsby, where you can learn about the pros and cons of each method.

In this section:

• Importing Assets Directly into Files
• Using the Static Folder
• Working with Images in Gatsby
• Using gatsby-image
• Using Cloudinary Image service
• Preoptimizing Your Images
• Working with Video
• Importing Media Content
• Working with GIFs
• Working with Images in Markdown
• Preprocessing External Images