New Launch

Take a deep dive into the fastest Gatsby, yet: Gatsby 5!

Importing Media Content

“Media content” is a broad term that generally includes images, videos, documents and files that are displayed on your website. For Gatsby sites, you have multiple options for importing media content depending on the type:

Images, SVG, and PDFs

Video assets

Like images, video assets present many options and requirements for cross-browser support. Learn about video embeds on the Gatsby docs page on working with video section.

Canvas and WebGL

The HTML5 <canvas> element provides a space for 2-dimensional drawing in a web environment. In Gatsby and React, it may help to include a library like react-konva or one of the comparison libraries to cut down on boilerplate and make drawing easier.

WebGL, on the other hand, creates a 3-dimensional space in a web environment using the <canvas> element. Libraries like Three.js are often used to enable WebGL experiences in React apps.

Using canvas and/or WebGL may require modifying your webpack config. Do you have experience with making this work in your Gatsby site? Contribute to the docs by adding more details to this page.

Edit this page on GitHub
© 2022 Gatsby, Inc.