gatsby-transform-cloudinary plugin idea!

Summary

I came across this Introducing intelligent responsive image breakpoints solutions blog post and since cloudinary offers a generous free tier I thought of a Gatsby plugin idea that takes your local images, upload them to Cloudinary and generates the responsive breakpoints and feed them to a Gatsby image also a remark transform plugin that scans the markdown for local images and does the same

Basic example

{
  resolve: `gatsby-transform-cloudinary`,
  options: {
   maxWidth: 1000,
   minWidth: 200,
   byteSteps: 20000,
  maxImages: 20,
  createDrived: false,
  apiKey: '<api_key>',
  apiSecret: '<api_secret>',
 }
}

Motivation

Since cloudinary offers a free tier and it can optimize images, users can benefit from this and they don’t need to host images themselves.

If there is a valid use case from other users I can build the plugin.

[DylanVann]

I’m finding locally processing images with Gatsby pretty impractical, adds a good 15 minutes to my build time, and I’ve only built one of several pages so far. Gatsby’s caching also hasn’t been super reliable.

This would be really useful!

Edit:

I need something working ASAP so I coded https://github.com/DylanVann/gatsby-transformer-cloudinary . It’s mostly using code from gatsby-transformer-sharp. Currently published under @dylanvann/gatsby-transformer-cloudinary since I don’t want to grab the name if someone else has a higher quality package.

Things that are broken:

• Fixed images.
• Fragments.

Good things:

• Includes support for generating/converting videos.
• Options for authentication.

I’m planning on using this for creating HTML5 video gifs.

[Khaledgarbaya]

@DylanVann That’s great Maybe we can continue from there