Automatically resize, crop, and transcode images using content-aware AI to fit any design, layout, or viewport.
Transform images dynamically
Eliminate the resource-intensive process of manually pre-creating all the different variants of every image for different browsers, devices, channels, and campaigns.
Apply a series of chained and named transformations to crop, resize, transcode, filter, and optimize images—on the fly.
Automatically create all the required variants from one high-resolution original, personalize, and deliver the most appropriate version to every user.
Gallery of Image Transformations
Adapt Images for Responsive Design
Cloudinary simplifies responsive delivery by balancing the trade-off between dimensions and bandwidth. Automatically select optimal breakpoints and dynamically generating variants the appropriate size to match the viewport.
Automatic art-directed cropping ensures that images fit the layout of any device without losing focus on the key area.
Optimize for faster loading
Dynamic format transcoding
Transcode raw images to any web-friendly format or use automatic format selection to deliver every image in the most efficient format based on the image content and viewing context.
Automatic quality compression
Adjust the quality of every image based on your desired compression level or automate the process of identifying the most optimal compression without visual degradation.
Apply “if ... then ... else” Conditions
Apply conditional logic to dynamically manipulate images according to different characteristics and viewing requirements.
Simply specify conditional “if .. else” parameters with the associated transformations to manipulate images and deliver variants that best suit the context and use-case.
Leverage SDK libraries
Integrate seamlessly with your existing application code
cloudinary.image("group.jpg", {width: 365, height: 133, crop: "fill"})
cl_image_tag("group.jpg",
array("width"=>365, "height"=>133, "crop"=>"fill"))
cl_image_tag("group.jpg", :width=>365, :height=>133, :crop=>"fill")
cloudinary.imageTag('group.jpg', {width: 365, height: 133, crop: "fill"}).toHtml();
<cl-image public-id="group.jpg" > <cl-transformation width="365" height="133" crop="fill"> </cl-transformation> </cl-image>
<Image publicId="group.jpg" > <Transformation width="365" height="133" crop="fill" /> </Image>
$.cloudinary.image("group.jpg", {width: 365, height: 133, crop: "fill"})
cloudinary.url()
.transformation(new Transformation().width(365).height(133).crop("fill"))
.imageTag("group.jpg");
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Width(365).Height(133).Crop("fill"))
.BuildImageTag("group.jpg")
imageView.cldSetImage(cloudinary.createUrl()
.setTransformation(CLDTransformation()
.setWidth(365).setHeight(133).setCrop("fill"))
.generate("group.jpg")!, cloudinary: cloudinary)
MediaManager.get().url().transformation(new Transformation().width(365).height(133).crop("fill")).generate("group.jpg");