docs: change gatsby-image references to gatsby-plugin-image

docs/contributing/gatsby-style-guide.md

@@ -479,7 +479,7 @@ When there are multiple ways to complete a task, the docs should explain the fol
 4. The best practice and why is it the best (if different than 3)
 5. Any tips on how to pick an option
 
-For example, `gatsby-image` is a component that includes Gatsby best practices for handling images, yet there are more fundamental and common ways of handling them. Documentation ought to make the best practice clear in addition to the most common and fundamental ways.
+For example, `gatsby-plugin-image` is a component that includes Gatsby best practices for handling images, yet there are more fundamental and common ways of handling them. Documentation ought to make the best practice clear in addition to the most common and fundamental ways.
 
 ## Docs
 

docs/docs/conceptual/security-in-gatsby.md

@@ -149,7 +149,7 @@ Sometimes in your Gatsby website, you will need display sensitive data or handle
 Content Security Policy is a security layer added in web applications to detect and prevent attacks, e.g. the XSS attack mentioned above.
 
 To add it to your Gatsby website, add [gatsby-plugin-csp](/plugins/gatsby-plugin-csp/) to your `gatsby-config.js` with the desired configuration. Note that
-currently there is a [compatibility issue](https://github.com/gatsbyjs/gatsby/issues/10890) between [gatsby-plugin-csp](/plugins/gatsby-plugin-csp/) and other plugins that generate hashes in inline styles, including [gatsby-image](/plugins/gatsby-image).
+currently there is a [compatibility issue](https://github.com/gatsbyjs/gatsby/issues/10890) between [gatsby-plugin-csp](/plugins/gatsby-plugin-csp/) and other plugins that generate hashes in inline styles, including [gatsby-plugin-image](/plugins/gatsby-plugin-image).
 
 > Note that not all browsers support CSP, check [can-i-use](https://caniuse.com/#feat=mdn-http_headers_csp_content-security-policy) for more information.
 

docs/docs/creating-a-source-plugin.md

@@ -305,7 +305,7 @@ This loose coupling between the data source and the transformer plugins allow Ga
 
 #### Sourcing and optimizing images from remote locations
 
-A common use case for source plugins is pulling images from a remote location and optimizing them for use with [Gatsby Image](/plugins/gatsby-image/). An API may return a URL for an image on a CDN, which could be further optimized by Gatsby at build time.
+A common use case for source plugins is pulling images from a remote location and optimizing them for use with [Gatsby Plugin Image](/plugins/gatsby-plugin-image/). An API may return a URL for an image on a CDN, which could be further optimized by Gatsby at build time.
 
 This can be achieved by the following steps:
 
@@ -413,7 +413,9 @@ query {
     id
     remoteImage {
       childImageSharp {
-        # fluid or fixed fields for optimized images
+        gatsbyImageData(
+          # arguments for optimized images
+        )
       }
     }
   }

docs/docs/sourcing-from-sanity.md

@@ -65,20 +65,20 @@ Gatsby cannot know about the types and fields without having documents of the gi
 
 ## Using images
 
-Image fields will have the image URL available under the `field.asset.url` key, but you can also use [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image) for a smooth experience. It's a React component that enables responsive images and advanced image loading techniques. It works great with this source plugin, without requiring any additional build steps.
+Image fields will have the image URL available under the `field.asset.url` key, but you can also use [gatsby-plugin-image](/plugins/gatsby-plugin-image/) for a smooth experience. It's a React component that enables responsive images and advanced image loading techniques. It works great with this source plugin, without requiring any additional build steps.
 
 There are two types of responsive images supported; _fixed_ and _fluid_. To decide between the two, ask yourself: "do I know the exact size this image will be?" If yes, you'll want to use _fixed_. If no and its width and/or height need to vary depending on the size of the screen, then you'll want to use _fluid_.
 
 ### Fluid
 
 ```jsx
 import React from "react"
-import Img from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 
 const Person = ({ data }) => (
   <article>
     <h2>{data.sanityPerson.name}</h2>
-    <Img fluid={data.sanityPerson.profileImage.asset.fluid} />
+    <GatsbyImage image={data.sanityPerson.profileImage.asset.gatsbyImageData} />
   </article>
 )
 
@@ -90,9 +90,7 @@ export const query = graphql`
       name
       profileImage {
         asset {
-          fluid(maxWidth: 700) {
-            ...GatsbySanityImageFluid
-          }
+          gatsbyImageData(fit: CLIP, placeholder: BLURRED)
         }
       }
     }
@@ -104,12 +102,12 @@ export const query = graphql`
 
 ```jsx
 import React from "react"
-import Img from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 
 const Person = ({ data }) => (
   <article>
     <h2>{data.sanityPerson.name}</h2>
-    <Img fixed={data.sanityPerson.profileImage.asset.fixed} />
+    <GatsbyImage image={data.sanityPerson.profileImage.asset.gatsbyImageData} />
   </article>
 )
 
@@ -121,29 +119,14 @@ export const query = graphql`
       name
       profileImage {
         asset {
-          fixed(width: 400) {
-            ...GatsbySanityImageFixed
-          }
+          gatsbyImageData(fit: FIXED, placeholder: BLURRED, width: 400)
         }
       }
     }
   }
 `
 ```
 
-### Available fragments
-
-These are the fragments available on image assets, which allows lookup of the fields required by gatsby-image in various modes:
-
-- `GatsbySanityImageFixed`
-- `GatsbySanityImageFixed_noBase64`
-- `GatsbySanityImageFixed_withWebp`
-- `GatsbySanityImageFixed_withWebp_noBase64`
-- `GatsbySanityImageFluid`
-- `GatsbySanityImageFluid_noBase64`
-- `GatsbySanityImageFluid_withWebp`
-- `GatsbySanityImageFluid_withWebp_noBase64`
-
 ## Overlaying drafts
 
 Sometimes you might be working on some new content that is not yet published, which you want to make sure looks alright within your Gatsby site. By setting the `overlayDrafts` setting to `true`, the draft versions will as the option says "overlay" the regular document. In terms of Gatsby nodes, it will _replace_ the published document with the draft.

docs/docs/why-gatsby-uses-graphql.md

@@ -220,12 +220,12 @@ In order to load the product and image data into GraphQL, you need to add a few
 - Optimize images ([`gatsby-plugin-sharp`](/plugins/gatsby-plugin-sharp/))
 - Add data about optimized images to Gatsby’s data store ([`gatsby-transformer-sharp`](/plugins/gatsby-transformer-sharp/))
 
-In addition to the plugins, we’ll use [`gatsby-image`](/plugins/gatsby-image/) to display the optimized images with lazy loading.
+In addition to the plugins, we’ll use [`gatsby-plugin-image`](/plugins/gatsby-plugin-image/) to display the optimized images with lazy loading.
 
 Install these packages using the command line:
 
 ```shell
-npm install gatsby-source-filesystem gatsby-transformer-json gatsby-plugin-sharp gatsby-transformer-sharp gatsby-image
+npm install gatsby-source-filesystem gatsby-transformer-json gatsby-plugin-sharp gatsby-transformer-sharp gatsby-plugin-image
 ```
 
 Then add them to `gatsby-config.js`:
@@ -330,7 +330,7 @@ Here’s what that looks like in practice:
 ```jsx:title=src/templates/product-graphql.js
 import React from "react"
 import { graphql } from "gatsby"
-import Image from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 
 export const query = graphql`
   query($slug: String!) {
@@ -340,9 +340,7 @@ export const query = graphql`
       price
       image {
         childImageSharp {
-          fluid {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: CONSTRAINED, width: 150)
         }
       }
     }
@@ -355,10 +353,10 @@ const Product = ({ data }) => {
   return (
     <div>
       <h1>{product.title}</h1>
-      <Image
-        fluid={product.image.childImageSharp.fluid}
+      <GatsbyImage
+        images={product.image.childImageSharp.gatsbyImageData}
         alt={product.title}
-        style={{ float: "left", marginRight: "1rem", width: 150 }}
+        style={{ float: "left", marginRight: "1rem" }}
       />
       <p>{product.price}</p>
       <div dangerouslySetInnerHTML={{ __html: product.description }} />
@@ -373,8 +371,7 @@ A few notes about this file:
 
 1. The result of the query is added to the template component as the `data` prop.
 2. The image path was automatically converted by the Sharp transformer into a “child node” that includes optimized versions of the image.
-3. The query uses a [GraphQL fragment](/plugins/gatsby-image/#fragments) to query all the required data for optimized images. GraphQL fragments _do not work_ in the GraphQL Playground.
-4. The `img` tag has been swapped out for a `gatsby-image` component named `Image`. Instead of a `src` attribute, it accepts an object with optimized image data.
+3. The `img` tag has been swapped out for a `gatsby-plugin-image` component named `GatsbyImage`. Instead of a `src` attribute, it accepts an object with optimized image data.
 
 Save this file, run `gatsby develop`, then open `http://localhost:8000/gql/purple-hat/`:
 

docs/docs/working-with-images.md

@@ -6,7 +6,7 @@ _This document uses the deprecated image plugin. Please check out how to work wi
 
 Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and resolutions of each image. Luckily, Gatsby has several useful [plugins](/docs/plugins/) that work together to do that for images on [page components](/docs/conceptual/building-with-components/#page-components).
 
-The recommended approach is to use [GraphQL queries](/docs/conceptual/graphql-concepts/) to get images of the optimal size or resolution, then, display them with the [`gatsby-image`](/plugins/gatsby-image/) component.
+The recommended approach is to use [GraphQL queries](/docs/conceptual/graphql-concepts/) to get images of the optimal size or resolution, then, display them with the [`gatsby-plugin-image`](/plugins/gatsby-plugin-image/) component.
 
 ## Query images with GraphQL
 
@@ -15,7 +15,7 @@ Querying images with GraphQL allows you to access the image's data as well as pe
 You'll need a few plugins for this:
 
 - [`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem/) plugin allows you to [query files with GraphQL](/docs/conceptual/graphql-concepts/#images)
-- [`gatsby-plugin-sharp`](/plugins/gatsby-plugin-sharp) powers the connections between Sharp and Gatsby Plugins
+- [`gatsby-plugin-sharp`](/plugins/gatsby-plugin-sharp/) powers the connections between Sharp and Gatsby Plugins
 - [`gatsby-transformer-sharp`](/plugins/gatsby-transformer-sharp/) allows you to create multiples images of the right sizes and resolutions with a query
 
 If the final image is of a fixed size, optimization relies on having multiple resolutions of the image. If it is responsive, meaning it stretches to fill a container or page, optimization relies on having different sizes of the same image. See the [Gatsby Image documentation for more information](/plugins/gatsby-image/#two-types-of-responsive-images).
@@ -38,9 +38,9 @@ export const query = graphql`
 `
 ```
 
-## Optimizing images with gatsby-image
+## Optimizing images with gatsby-plugin-image
 
-[`gatsby-image`](/plugins/gatsby-image/) is a plugin that automatically creates React components for optimized images that:
+[`gatsby-image`](/plugins/gatsby-plugin-image/) is a plugin that automatically creates React components for optimized images that:
 
 > - Loads the optimal size of image for each device size and screen resolution
 > - Holds the image position while loading so your page doesn't jump around as images load

packages/gatsby-source-wordpress/docs/migrating-from-other-wp-source-plugins.md

@@ -62,9 +62,9 @@ So your query would change to look like this:
 
 Any inline fragments will need to be updated since type names have changed. Use Gatsby's [Graphiql](https://www.gatsbyjs.org/docs/running-queries-with-graphiql/) at `http://localhost:8000/___graphiql` with `gatsby develop` running to determine how your inline fragment typenames should be modified.
 
-### `gatsby-source-graphql` and `gatsby-image`
+### `gatsby-source-graphql` and `gatsby-plugin-image`
 
-If you're using any plugins or additional schema customization code to enable the use of `gatsby-image`, you can delete that code and uninstall those plugins. `gatsby-source-wordpress@v4` handles that for you out of the box!
+If you're using any plugins or additional schema customization code to enable the use of `gatsby-plugin-image`, you can delete that code and uninstall those plugins. `gatsby-source-wordpress@v4` handles that for you out of the box!
 
 ### `gatsby-source-graphql` and WPGraphQL input arguments