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

Mariyam malik — Thu, 29 Oct 2026 09:06:25 +0000

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

My Journey into AI Engineering ☁️🤖

Mariyam malik — Thu, 29 Oct 2026 08:52:32 +0000

Hi DEV Community! 👋

I'm a Junior AI Engineer from Pakistan, passionate about building AI agents, chatbots, voicebots, and LLM-powered applications.

Recently, I completed Cloudinary Academy's Cloud to Crowd: Media IQ for Developers with AI course and joined the Cloudinary Creators Community as a Creator Candidate.

I'm looking forward to exploring Cloudinary's media capabilities, building practical projects, and sharing what I learn along the way.

This is the beginning of my journey here, and I'm excited to connect with fellow developers, exchange ideas, and keep learning. 🚀

Let's build something useful!

DEV Community: Mariyam malik

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

My Journey into AI Engineering ☁️🤖