CODEWITHSUNDEEP
javascripthtmlimageperformancecloudinary
Jed Watson
Jed Watson

Reputation: 20378

How do you detect the size of a cloudinary resized (scale / thumb / etc) image?

I am using Cloudinary's javascript / node.js library to generate resized images using various methods (scale, crop, fit, etc).

The library returns a url based on the transformation options specified, BUT -

I don't know the size of the image until it has been loaded, and because the images are user-created content, and can be different aspect ratios or smaller than the maximum size displayed, the size won't necessarily be what I've specified in the options.

While you can use an img tag with just src and alt values, you should really also specify width and height, or it can slow down the rendering of the HTML page (either waiting for the image to load before layout or recalaulting layout when images are loaded, depending on the browser and other factors).

Since Cloudinary knows the original image dimensions and the algorithm used to generate the resized image, it makes sense that the final width and height of a resized image are possible to detect, but I can't work out how to do so using any of the libraries available.

Is there a feature I've missed, library that exists, or example where this has been done?

Upvotes: 0

Views: 1165

Answers (1)

Itai Benari
Itai Benari

Reputation: 61

In the upload process you can keep track of the dimensions of the uploaded images and then calculate the expected dimensions when displaying the images. The dimensions are given in the response to the upload request. See Node.js server side upload.

Alternatively you may use eager transformations, get the dimensions of the image after transformation in the response, store that data, and use it when displaying the image.

Upvotes: 1

Related Questions