Plugins de transformación

gatsby-transformer-sharp:

Se encarga de crear nuevas versiones de nuestras imágenes con diferentes tamaños, formatos (.webp, .png, entre otros) y calidad.

gatsby-image:

Utiliza la información de gatsby-transformer-sharp para cargar las versiones más livianas de nuestras imágenes (utilizando el tamaño y formato que mejor se adapten al usuario) y luego cambiarlas por las versiones actualizadas de mejor calidad, todo esto con el fin de mejorar el tiempo de carga inicial de nuestra aplicación.

Para usarlo solo debemos seguir los siguientes pasos:

Importar StaticQuery y graphql desde gatsby:

// src/components/image.js
import { StaticQuery, graphql } from 'gatsby';

Importar Img desde gatsby-image:

// src/components/image.js
import Img from 'gatsby-image';

Utilizar graphql para crear una consulta en la propiedad query de StaticQuery y consumir los datos desde la propiedad render:

// src/components/image.js

<StaticQuery
  query={graqhql`
    query GET_IMAGE {
      icon: file(relativePath: { eq: "icon.png" }) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            ...GatsbyImageSharpFluid
          }
        }
      }
  `}
  render={data => {
    console.log(data);

    return <Img fluid={data[name].childImageSharp.fluid}/>;
  }}
/>