Developers Hub

Discover how Cloudinary helps you build more engaging and performant web and app experiences while making your life easier along the way.

Tools for Developers

VS Code Extension

AI Agent Skills Pack

React Starter Kit

MCP Servers

Next.js Starter Kit

A woman and a golden retriever in the mountains. They're sitting, facing away from the camera while the dog noses the woman. They're surrounded by natural splendor including majestic mountains, puffy clouds, and evergreen-studded hills. — An un-cropped image overlaid with a cropping window showing how it would be cropped by Cloudinary.

Original: 18 MB
We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

Original: 18 MB
We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

Duration: 1:42

Duration: 0:15

URL:

/ar_0.5,c_fill,g_auto,w_433/q_auto/f_auto/hiking_dog_mountain.jpg

cloudinary.image("hiking_dog_mountain.jpg", {transformation: [
  {aspect_ratio: "0.5", gravity: "auto", width: 433, crop: "fill"},
  {quality: "auto"},
  {fetch_format: "auto"}
  ]})

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

CloudinaryImage("hiking_dog_mountain.jpg").image(transformation=[
  {'aspect_ratio': "0.5", 'gravity': "auto", 'width': 433, 'crop': "fill"},
  {'quality': "auto"},
  {'fetch_format': "auto"}
  ])

(new ImageTag('hiking_dog_mountain.jpg'))
	->resize(Resize::fill()->width(433)
->aspectRatio(0.5)
	->gravity(
	Gravity::autoGravity())
	)
	->delivery(Delivery::quality(
	Quality::auto()))
	->delivery(Delivery::format(
	Format::auto()));

cloudinary.url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).imageTag("hiking_dog_mountain.jpg");

cl_image_tag("hiking_dog_mountain.jpg", transformation: [
  {aspect_ratio: "0.5", gravity: "auto", width: 433, crop: "fill"},
  {quality: "auto"},
  {fetch_format: "auto"}
  ])

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("0.5").Gravity("auto").Width(433).Crop("fill").Chain()
  .Quality("auto").Chain()
  .FetchFormat("auto")).BuildImageTag("hiking_dog_mountain.jpg")

cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("0.5").setGravity("auto").setWidth(433).setCrop("fill").chain()
  .setQuality("auto").chain()
  .setFetchFormat("auto")).generate("hiking_dog_mountain.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).generate("hiking_dog_mountain.jpg");

cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));

cloudinary.image {
	publicId("hiking_dog_mountain.jpg")
	 resize(Resize.fill() { width(433)
 aspectRatio(0.5F)
	 gravity(
	Gravity.autoGravity())
	 })
	 delivery(Delivery.quality(
	Quality.auto()))
	 delivery(Delivery.format(
	Format.auto())) 
}.generate()

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

Build With Cloudinary in Your Language and Framework

View More SDKs ->

Start Building:
Resources for Every Developer

New to Cloudinary

Get Your First Media Asset Live in Minutes

Upload, transform, and deliver. No prior experience needed.

AI & Intelligence

Let Models Do the Work

Tagging, restoration, search, and generation — without the glue code.

Front-End

Your Stack, Your Way

Drop-in guides for React, Next.js, and beyond.

Move Fast

Automate the Tedious Stuff, Ship the Rest

Low-code and integration paths for teams that can’t afford bottlenecks.

Deep Dive

When You Want to Understand How It Really Works

Architecture, internals, and everything under the hood.

Performance

Measurable Improvements Your Users Will Notice

Core Web Vitals, load times, and real-world results.

Sample Applications

Learn how to optimize, manage, and deliver visual media with less effort with apps that showcase automation, AI enhancements, and integrations with popular frameworks and CMS systems. Browse the gallery, clone the repo, and customize the apps to suit your workflow.

Visit the App Gallery ->

Imgto.xyz

ImageCarbon

Photo Crate

CloudyCam

Image to Blog AI

Eventography

Documentation

Check out our extensive developer documentation for quick starts, in-depth feature guides, comprehensive references, code explorers, video tutorials, and more!

Image Transformations

Modify images on the fly by applying parameters for resizing, cropping, formatting, effects, and more through the URL or API.

SEE DOCS
Media Optimization

Automatically adjust image and video quality, format, and size to deliver the best performance across devices, browsers, and network conditions.

SEE DOCS
API References

Detailed documentation for all image, video, upload, and admin APIs, including supported parameters, methods, and code examples.

SEE DOCS
Client-side Widgets

Prebuilt UI components that let users upload, browse, and manage media directly from the browser with minimal configuration.

SEE DOCS
Platform Integrations

Ready-made connectors to popular frameworks, CMSs, e-commerce platforms, and CI/CD tools for streamlined media management.

SEE DOCS
Code Explorers & Demos

Interactive examples and sample code to help devs learn, test, and implement media capabilities quickly.

SEE DOCS

What Developers Are Saying

James Q Quick

Developer Educator, Cloudflare

Creating customized images for each episode of our podcast, Compressed.fm, is a hassle. To save loads of time and energy, we use Cloudinary to automatically generate unique images with JavaScript for each episode. This is just one of the amazing benefits that Cloudinary brings to the media world.

Jason Lengstorf

Creator of CodeTV

I have spent hundreds of hours wrestling with media assets for websites in my career. Cloudinary was a game changer for me because I was able to write a bit of code for my websites to transform and optimize media, then forget about it. I don’t have to think about accidentally publishing giant, unoptimized images. In fact, I don’t have to think about images at all anymore. Which is nice.

Tim Benniks

Developer Experience Lead at Contentstack

I’ve used Cloudinary across personal projects, conference demos, enterprise composable stacks, and AI-driven video workflows because it turns media into programmable infrastructure. Instead of hand-managing formats, transformations, optimization, and delivery, I can focus on the experience I want to build and let Cloudinary handle the heavy lifting. After years as part of the Cloudinary community, what still stands out is how developer-friendly it feels, from a single optimized image URL to production-scale video pipelines.

Kent C. Dodds

Software Engineer & Educator, Kent C. Dodds Tech LLC

Cloudinary allows me to improve my site’s performance and easily manage images and even generate custom images with it’s powerful transformation capabilities.

Chris Coyier

Co-Founder, Codepen

I have pretty much accomplished this very difficult task of dealing with images on the website fairly trivially… Cloudinary is awesome for that.

Gant Laborde

CIO, Infinite Red

Cloudinary is my favorite one-stop tool for effective and impactful media results. With one stroke, I can leverage Cloudinary to deliver an optimized, reliable, and outstanding solution in a moment that should have taken months

Raymond Camden

Senior AI Adoption Engineer at SpaceXAI

Cloudinary hits the sweet spot of powerful, flexible, and incredibly easy to use. Its URL-based syntax means it’s quick to pick up and test by just playing around in your browser. Combined with excellent docs and a huge amount of examples, I can absolutely recommend their service!

Debbie O’Brien

Platform Engineer - Applied AI at Zephyr Cloud

Updating new podcast episodes on my site has never been easier thanks to the Cloudinary MCP. I can just use my coding agent of choice and download a thumbnail image for the podcast and then it will use the Cloudinary MCP to upload it to my Cloudinary account meaning I don’t have to switch context or do the work myself. This makes things so much easier and quicker.

Rizel Scarlett

Principal Developer Advocate at Entire

Between tutorials, demos, and social posts, DevRel introduces a lot of time-consuming image editing. Cloudinary’s Asset Management MCP server helps me generate thumbnails and transform assets with less context switching and less friction since I’m already using agents like Goose in my daily workflow.

Didn’t Find What You’re Looking For?

Search our extensive Documentation to find the answers to all your questions.