[docs] add image docs recipes

[marcysutton]

As part of #14529 and following #14251, we are making updates to the Docs Recipes. Because images are part of a key workflow, it makes sense to add an image section to the recipes.

This issue is meant to capture that work and assure it is completed with the new recipe format:

• Recipes will be grouped into key workflow categories
• List any requirements or prerequisites
• Step-by-step instructions (kept short by listing prereq's)
• Optional live example
• Links to other resources

For images, concise and digestible recipes would make it clear at a glance that there are multiple techniques. Here are some suggestions:

• Import into a component with Webpack
• Reference from static folder
• Query with GraphQL
  • by relativePath
  • from a directory
  • from post frontmatter
  • fixed width and height
  • fixed maxWidth
  • fluid maxWidth and quality
  • with inline styles applied
  • with fragments (all of them? just a few?)

[marcysutton]

This work is being broken up into individual issues, so I'm going to close this one. See referenced issues for more!

• [docs][recipes] Images: import into a component with webpack #14985
• [docs][recipes] Images: reference from static folder #14986
• [docs][recipes] Images: querying with GraphQL and gatsby-image #14989