Developer resources for using images and videos in your apps

Developers

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

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()));

Popular With Developers

Optimization

Responsive

Video

Personalization

AI and MCP Server

Mobile

Circles

Developer SDKs

Whatever your tech stack, Cloudinary has you covered with a huge selection of SDKs in all your favorite backend, frontend, and mobile languages and frameworks.

FRONTEND
BACKEND
MOBILE

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 →

Documentation

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

Community Libraries

These libraries are built and maintained by community members. They provide Cloudinary integrations with popular frameworks and other developer tools. Please note that these community libraries are not official Cloudinary SDKs and are dependent on the community to continually enhance them.

view more community libraries

What Developers Are Saying

James Q Quick

Content Creator, Learn Build Teach, LLC

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

VP of Developer Experience, Netlify

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

Principal Developer Advocate, Uniform

As a creative developer I’ve been working with media for many years. The times before I discovered Cloudinary feel like the stone ages now. I used to role my own image optimization pipelines, and tools for image transformations. When we needed to normalize thousands of product assets for one of the number one fashion houses in the world, we reached out to Cloudinary. We got it done in a few days and a collaboration was born. I can’t imagine working on any project without using Cloudinary.

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 Developer Evangelist, Adobe

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!

Didn’t Find What You’re Looking For?

Search our extensive documentation to find answers to all your questions.

Ready to Start Using Cloudinary?