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) } } }