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-plugin-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 the 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 →

Straight forward demo

Query

query {
  image: file(name: { eq: "sergey-semin-unsplash" }) {
    cloudinary: childCloudinaryAsset {
      gatsbyImageData(height: 300, layout: FIXED)
    }
  }
}

Create avatars from any image

Query

query {
  image: file(name: { eq: "sergey-semin-unsplash" }) {
    cloudinary: childCloudinaryAsset {
      gatsbyImageData(
        height: 300
        aspectRatio: 0.8
        layout: FIXED
        transformations: ["c_thumb", "g_face"]
      )
    }
  }
}

Existing Data

Query

query {
  blogPost(title: { eq: "Blog Post Example One" }) {
    heroImage {
      gatsbyImageData(
        height: 300
        layout: FIXED
        transformations: ["e_grayscale"]
        placeholder: BLURRED
      )
    }
  }
}

Remote image

Query

query {
  project(name: { eq: "Project Example One" }) {
    coverImage {
      gatsbyImageData(
        layout: FIXED
        height: 300
        aspectRatio: 1
        placeholder: TRACED_SVG
        transformations: ["c_crop", "e_pixelate_faces"]
      )
    }
  }
}

Lazy-loaded animated GIFs!

Query

query {
  image: file(name: { eq: "giphyCat" }) {
    cloudinary: childCloudinaryAsset {
      gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
    }
  }
}