Gatsby Cloudinary Image Transformer

Cloudinary + Gatsby for Painless Image Handling

Cloudinary is really good at managing assets. Gatsby is really good at delivering high-performance web pages using (among other things) gatsby-image.

Put ’em together and they’re like peanut butter and jelly. Peas and carrots. Chocolate and everything.

Your workflow stays the same: add images to your site, have gatsby-source-filesystem read them, and query for them to use them in your components.

Under the hood, your images will be uploaded to Cloudinary and added back to Gatsby’s data layer. No more dealing with Sharp issues! No more waiting for hundreds of images to be generated on your local machine! Just sweet, sweet, high-performance images with a powerful image transformation API at your fingertips.

Installation

Learn how to get started in the README →

Fluid images loaded from Cloudinary

Marisa Morby standing in a rose garden.
query {
  image: file(name: { eq: "marisa" }) {
    cloudinary: childCloudinaryAsset {
      fluid {
        ...CloudinaryAssetFluid
      }
    }
  }
}

Create avatars from any image!

Jason giving finger guns toward the camera.
query {
  image: file(name: { eq: "jason" }) {
    cloudinary: childCloudinaryAsset {
      fixed(
        width: 225,
        transformations: ["ar_1:1", "c_thumb", "g_face"]
      ) {
        ...CloudinaryAssetFixed
      }
    }
  }
}

Lazy-loaded animated GIFs!

Jason, victorious.
query {
  image: file(name: { eq: "victory" }) {
    cloudinary: childCloudinaryAsset {
      fluid {
        ...CloudinaryAssetFluid
      }
    }
  }
}

Or you can get plain silly

Marisa Morby standing in a rose garden.
query {
  image: file(name: { eq: "marisa" }) {
    cloudinary: childCloudinaryAsset {
      fluid(
        transformations: ["e_blackwhite"]
        chained: [
          "e_vectorize:colors:2:despeckle:20,e_tint:100:tomato:0p:white:100p",
          "l_beard_png,w_0.77,fl_relative,g_face,a_-5,y_0.06"
        ]
      ) {
        ...CloudinaryAssetFluid
      }
    }
  }
}