Gatsby Cloudinary Image Transformer

Animated GIFs and gatsby-plugin-image?!

Cloudinary can handle GIFs, so we can use’em with this transformer. No special rules apply; just add a GIF like you would any other image.

Lazy-loaded animated GIFs!

Cat Pirate GIF By Product Hunt.

Query

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

GIFs with transformations!

Cat Pirate GIF By Product Hunt.

Query

query {
  image: file(name: { eq: "giphyCat" }) {
    cloudinary: childCloudinaryAsset {
      gatsbyImageData(
        layout: CONSTRAINED
        placeholder: BLURRED
        transformations: ["e_gamma:500"]
      )
    }
  }
}