Gatsby: The Definitive Guide

Chapter 7. Assets in Gatsby

While creating and generating pages is one of the aspects of Gatsby that receives the most attention, Gatsby’s asset handling capabilities are also highly robust. After all, when building Gatsby sites, it’s not just text we’re concerned with; often, as developers, we must also juggle images, videos, fonts, and other file assets that don’t fit neatly into our sites. Complicating matters further is the fact that today’s users demand highly performant and optimized image and video delivery.

There are a variety of plugins and APIs available to interact with different assets you might want to include in your Gatsby site, be they photographs, video streams, web fonts, or PDF documents. We’ll look at the best practices Gatsby offers for specific asset types (images, videos, and fonts), but we’ll begin with an overview of how to work with assets in general in Gatsby: by importing them into Webpack as part of the module system or importing them on their own as static assets.

Working with Assets

In Gatsby, an asset is loosely defined as any file that needs to be used anywhere in a Gatsby site, whether that means in a Gatsby page, a React component, or a Markdown file. Assets can run the gamut from images in JPEG and PNG formats to animated GIFs as well as videos, fonts, and other static files with arbitrary extensions.

Types of Assets in Gatsby

Before we get into the two approaches for importing assets, let’s briefly examine which types of assets (which Gatsby ...