Image Manipulation
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.
Gallery of image manipulations
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.
Optimize image performance for improving user experience
cl_image_tag("group.jpg", :quality=>"auto", :fetch_format=>:auto)
cl_image_tag("group.jpg", array("quality"=>"auto", "fetch_format"=>"auto"))
cloudinary.image("group.jpg", {quality: "auto", fetch_format: "auto"})
CloudinaryImage("group.jpg").image(quality="auto", fetch_format="auto")
$.cloudinary.image("group.jpg", {quality: "auto", fetch_format: "auto"})
cloudinary.url().transformation(new Transformation().quality("auto").fetchFormat("auto")).imageTag("group.jpg");
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto").FetchFormat("auto")).BuildImageTag("group.jpg")
MediaManager.get().url().transformation(new Transformation().quality("auto").fetchFormat("auto")).generate("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");