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 ->

Build with Node.js

Build with React

Build with NEXT.js

Build with JavaScript

Build with Python

Build with PHP

Build with Astro

Build with Java

Build with .NET

Build with Rails

Build with iOS

Build with Android

Build with Laravel

Build with Svelte

Build with Nuxt

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

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!

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.

Didn’t Find What You’re Looking For?

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