cloudinary / responsive_breakpoints_generator

439 stars 34 forks source link

Use algorithm locally to create image specific breakpoints? #14

Closed katerlouis closed 3 years ago

katerlouis commented 3 years ago

Sorry if this is too naive, but I have to ask if there's a way to use the algorithm to create image specific breakpoints locally using nodejs instead of having to upload all the files to cloudinary in order to donwload them again.

igy commented 3 years ago

Hi Louis,

I'm afraid the short answer is no: we don't have a library you can install in your application to perform the breakpoint selection locally.

The breakpoint selection is part of our server-side functionality, and the documentation for the relevant feature can be found here: https://cloudinary.com/documentation/image_upload_api_reference#responsive_breakpoints_parameter_request_settings

This project holds the code for this site: https://www.responsivebreakpoints.com/ which serves as a demonstration for how that feature works, but it's not a standalone project; "under the hood" it's using Cloudinary's Upload API with the responsive_breakpoints parameter and then rendering the results for your reference

Regards, Stephen

katerlouis commented 3 years ago

That's what I figured. :( But just to be sure: We don't want to use this inside of our application, more of during development locally on my machine. That doesn't change the answer though, right? Uploading 500+ images, and downloading all the resulting images manually, won't work for us :'(

igy commented 3 years ago

Hi Louis,

Even if you won't be delivering the assets from Cloudinary directly, it should be relatively straightforward to automate getting the images that you need.

When you call the Upload API and pass the responsive_breakpoints options, you can request that as well as performing the analysis, we also create the corresponding derived versions of the image for the calculated breakpoints, and the Upload API call response includes the URLs for those images.

So, using that, you can upload an image, download the resized copies with the calculated breakpoints, save them locally (or to your server, or whatever else you need to do with them), and then delete the original image via the API afterward if you won't use it again, and all of this involves just two calls to our API and the HTTP requests to download the files

Regards, Stephen

katerlouis commented 3 years ago

Thx for the rundown!

My issue is the time it takes to upload the images in the first place. 500+ images will take a long time. I'm not very good with node and servers etc., so I hoped to avoid setting up a server to do these tasks for me. I don't want to wait for all the images to finish up- and downloading before I can take my laptop and go home.

But let's say we would use the Upload API for that. Is that a free solution or would we need to purchase some kind of a paid plan?

igy commented 3 years ago

Cloudinary's account usage is based on three factors, which are 1) transformations (the upload of new files and the creation of new derived versions of your files using transformations), 2) storage, and 3) bandwidth.

Unless the files are very very large or you download them many times each, I think our free plan should work OK: https://cloudinary.com/pricing

That's based on a back-of-the-envelope calculation assuming you have 500 files uploaded, create 5 new derived versions of each at the different breakpoints, for a total of 3000 transformations. That counts as 3 credits, and our free plan allows 25 credits in a rolling 30-day period, leaving 22 credits for the storage (1 GB = 1 credit) and downloading (1 GB = 1 credit) of the files

katerlouis commented 3 years ago

Okay, so in any case we will need an account to use the API. Okay, thanks a lot for the deep dive. I'm gonna look into that.

igy commented 3 years ago

You're welcome; If you encounter any issues setting it up, don't hesitate to ask us and we'll assist.

For issues that aren't suspected bugs in a specific SDK, I recommend contacting us via our support site ( "submit a request" link at https://support.cloudinary.com/hc/en-us ) so that you can share your account details, sample API calls etc