Image Transformation

Transform, adapt, and optimize images with a URL-based API

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

Transform and adapt for any context

Automatically resize, crop, and transcode images using content-aware AI to fit any design, layout, or viewport.
Leverage AI and automation

Eliminate manual workflows by using AI and ML for face and object detection, background removal, and more.
Customize for different campaigns

Dynamically add overlays or underlays, add or edit layers, and easily control the location, style, and other attributes.
Apply visual enhancements

Enhance the visual appearance of images with effects and filters for color, brightness, contrast, and other properties.

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.

Try the Responsive Image Breakpoints Generator

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.

Learn more about performance optimization

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