Clarification on how images are dynamically optimized and delivered
Hi Team, I've read through the entire documentation and have some questions on a particular subject.
To set some context, I'm creating an app where users can upload images. I'm trying to deliver these image(s) responsively with optimizes sizes, etc.
With that in mind, when my browser makes a request to fetch an image, it looks like this: `https://res.cloudinary.com/berserkers/image/upload/q_auto,f_auto,w_auto,c_scale,dpr_auto/v1628043758/${src}`;
Are those transformations in the url enough to deliver optimizations?
Or, is it first required to have multiple versions of the image first stored in cloudinary to be able to switch between images?
In order to utilize variant urls, do I first need to create them programmatically? Quick reminder that images will be user generated.
If so, then does that mean I can't use the Upload Widget? I dont see within the Upload Widget documentation where I can streamline the breakpoint generation process.
Regarding automatic responsive images, what about w_auto combined with dpr_auto as descriibed in the docs here: https://cloudinary.gitbook.io/hackference-2018/cloudinary/image-optimization-ii#automatic-responsive-images-w_auto-and-dpr_auto
-
Hi Maddy,
Thank you for reaching out.
Our JavaScript library accomplishes what you want. Ultimately, it uses class names to automatically check the available width of all images with that class name, then updates the HTML image tags accordingly. In short, you will need to follow these 3 steps:
- Include the Cloudinary JS library in the HTML pages
- Prepare image tag(class, data-src,w_auto/dpr_auto in URL)
- Call the Cloudinary responsive method
For more information on this, you can refer here: https://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_javascript
Hope this helps, please let me know if you have any further questions.
Thanks,
Wissam
0
Post is closed for comments.
Comments
1 comment