Resizing and Optimizing Images with Cloudinary: A Beginner-Friendly Guide ☁️

Images are an important part of modern web applications, but large images can affect loading performance. Cloudinary makes it easy to transform and optimize images directly through delivery URLs, without manually editing the original file.

As part of my Cloudinary Creators Community journey, I explored how Cloudinary URL transformations work using an existing sample image.

1. My Sample Image

I used Cloudinary's sample image with the public ID samples/man-on-a-street.

Original delivery URL:

https://res.cloudinary.com/hxcbuq1u/image/upload/samples/man-on-a-street

*2. Resize an Image
*
Cloudinary lets us resize an image by adding transformation parameters to its delivery URL.

https://res.cloudinary.com/hxcbuq1u/image/upload/w_500,c_scale/samples/man-on-a-street

Here:

w_500 sets the image width to 500 pixels.

c_scale scales the image proportionally.

I tested this URL in my browser and confirmed that the transformed image loaded successfully.

*3. Automatically Optimize the Image
*
We can also ask Cloudinary to select an appropriate image format and quality automatically.

https://res.cloudinary.com/hxcbuq1u/image/upload/w_500,c_scale/f_auto/q_auto/samples/man-on-a-street

Here:

f_auto selects a suitable image format based on the browser's capabilities.

q_auto automatically adjusts image quality to help balance visual quality and file size.

I opened this transformed URL as well and confirmed that it worked.

4. What I Learned

This hands-on exercise helped me understand how Cloudinary delivery URLs can apply transformations dynamically. Instead of creating and storing multiple versions of an image manually, developers can request different versions by changing URL parameters.

I also learned how automatic format and quality settings can help optimize image delivery.

Conclusion

This was my first practical exploration of Cloudinary's image transformation capabilities. I'm looking forward to building more media-focused applications and learning how Cloudinary can improve media workflows.

Thanks to the Cloudinary Creators Community for providing an opportunity to learn, build, and share! ☁️

Try it yourself: https://cloudinary.com/documentation?utm_source=chatgpt.com