Use hashed folder names instead of filenames for images

Summary

Since more and more people ask (https://github.com/gatsbyjs/gatsby/issues/3132, https://github.com/angeloashmore/gatsby-source-prismic/issues/40, Discord) about the image filenames and how they could remove/change the hash (Reason: SEO) I propose to move the hash out of the filename into a folder name.

Before: /static/netlify-and-discord-1c11979b664a737c4d748b895d4507a7-b4bbd.webp

After: /static/1c11979b664a737c4d748b895d4507a7-b4bbd/netlify-and-discord.webp OR /static/1c11979b664a737c4d748b895d4507a7/b4bbd/netlify-and-discord.webp

The details of the folder names / structure need to be defined as to what makes the most sense. The second structure would allow to have each image (with its different sizes) in its own folder.

Motivation

The idea came up while looking at the urls that Cloudinary serves. They do the same - and I think it’ll make the complaints of the people go away.

Cloudinary: https://cloudinary.com/blog/how_to_dynamically_create_seo_friendly_urls_for_your_site_s_images#dynamic_seo_suffixes

[Sekhmet]

It’s time to put my Gatsby shirt on and work on some PRs again.

I will work on that.

[vinberdon]

It looks like I can just configure webpack on my own ( https://webpack.js.org/guides/caching/ ) and remove the hash settings that are built into gatsby’s version, correct?

The OP here about changing directories is not good for SEO or external (or even hard-coded internal) links at all. Many things will break and SEO will plummet. I understand that this is a niche request, so I’ll just have to find my own way to do it.

Is something like this able to be made into a plugin? Like remove-filename-hash-plugin so that I can easily implement it into any future Gatsby build?