Manipulate images dynamically

Cloudinary offers a wide array of image manipulations through a URL-based API to apply artistic effects to an image or to simply scale it. With simple system of chained transformations, you can crop, scale, transcode, filter, and optimize your original high-resolution images on the fly. Tailor transformations based on conditional parameters or the viewing context to deliver the most appropriate version to users.

Adapt Images for Responsive Design

Automatic resizing and scaling

Dynamically resize and scale images based on the resolution and viewport dimensions of the viewing device.

Content-aware cropping

Images often require cropping to fit responsive layouts and diverse device dimensions. Cloudinary detects the region of interest in an image and crops it on the fly to fit the graphic design on any device without losing focus on the key content.

Learn more about responsive images

Optimize image performance for improving user experience

<%= cl_image_tag("group.jpg", :transformation => {:quality=>:auto, :fetch_format=>:auto}) %>
<?php echo cl_image_tag("group.jpg",
array("transformation"=>array("quality"=>"auto", "fetch_format"=>"auto"))); ?>
cloudinary.image("group.jpg", transformation: {quality: "auto", fetch_format: "auto"})
CloudinaryImage("group.jpg").image(quality="auto", fetch_format="auto")
$.cloudinary.image("group.jpg", { transformation: {quality: "auto", fetch_format: "auto"} })
cloudinary.url().transformation(
  new Transformation().quality("auto").fetchFormat("auto")).imageTag("group.jpg")
cloudinary.Api.UrlVideoUp.Transform(
  new Transformation().Quality("auto").FetchFormat("auto")).BuildImageTag("group.jpg")
cloudinary.url().transformation(
  new Transformation().quality("auto").fetchFormat("auto")).imageTag("group.jpg")

Visually enhance your images to meet the design requirements

Enhance the visual appearance of images by applying a wide range of effects and filters for desired effects. Dynamically add text or image overlays and easily modify the font, style, location, and other attributes.

Add watermarks and overlays

Whether you need to protect images with watermarks, personalize them or create memes, you can dynamically add text or image overlays and easily control the font, style, location, and other attributes.

Apply “if ... then ... else” conditions for transformations

Every image has different characteristics. With Cloudinary, you can dynamically manipulate images according to their characteristics and viewing requirements to ensure an optimal visual experience for users.

Simply specify conditional “if .. else” parameters with the associated transformations to manipulate an image, depending on the viewing requirement.

Integrate with your development framework

Cloudinary’s client-side integration libraries and SDKs simplify the integration with your development platform of choice.

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