Gatsby: Why use /static when /src/images already available in gatsby-starter-default?

[ajayns]

Summary

I noticed that a couple of starters and projects use a separate /static folder rather than /src/images for their image assets. Some even had both of them together.

I'm confused which one do I go for and what is the difference in the build process between the two. It seems that /src/images is handled by gatsby-source-filesystem and gatsby-sharp plugins while /static images are directly imported.

About my case, as image assets I have pictures as pngs/jpgs, illustrations as svg, couple social media icons as svg, favicons, logos. Any docs or insights into this would be appreciated.

[sidharthachatterjee]

Hey @ajayns

The static directory can be used for any assets that you need to serve publicly (the contents of this get copied over to public) without any processing. This could include favicons, images or even some legacy HTML maybe.

For images typically though, we definitely recommend putting them in /src/images and using gatsby-sharp-plugin because of all the benefits sharp gives us (correct sizes, responsive srcsets, base64 encoded blurred versions etc)

So if you're using the gatsby-sharp-plugin (you _should_ be), put the images in a folder that the plugin config is then directed at (like /src/images in the Default Starter) and for anything else that needs to be publicly accessible and doesn't need any processing, put it in static.

[ajayns]

Thank you so much for your quick response! Much appreciated.

I was aware about the processing part but didn't know that the static directory is directly copied into public, is this there in the docs somewhere cause I feel it definitely should be mentioned.

I am using gatsby-sharp-plugin and yes it works great for png and jpegs but does it help for SVGs? Out of the box does Gatsby do any optimisations to reduce SVG size? Else should I just put those in the static folder?

[sidharthachatterjee]

Here are the docs for the static folder
https://www.gatsbyjs.org/docs/adding-images-fonts-files/#using-the-static-folder

gatsby-plugin-sharp doesn't do anything with SVGs

You could put them in the static folder or import them in your JavaScript like

import yourSVG from './logo_large.svg'

const Home = () => <><img src={yourSVG} /></>

[ajayns]

Makes sense, thank you for sharing the doc and for clearing the doubts.

Closing the issue.