Manipulate Images Dynamically
Whether you need to apply artistic effects to an image or simply scale it, Cloudinary offers a wide array of image manipulations through its URL-based API. Using a simple system of chained transformations, you can crop, scale, transcode, filter and optimize your original high-resolution images on-the-fly and tailor transformations based on conditional parameters or the viewing context to deliver the right version to every user.
Gallery of Image Manipulations
Cloudinary offers a vast array of image manipulation capabilities
- Facebook Profile, Face Thumbnail, Sepia Effect, Rotation, Watermark
- Video Thumbnail, Face Cropping, Rounded Corners, Decrease Saturation
- Uploaded Images, Multiple Overlays, Gravity Based Square Filling, Custom Coordinates
- Facebook Pictures, Multiple Overlays, Face Detection, Rotation, Flipping, Hue Changes
Adapt Images for Responsive Design

Dynamically resize and scale images based on the resolution and viewport dimensions of the viewing device.
Content-aware croppingAutomatically detect the region of interest in every image and crop them on-the-fly to fit the graphic design and layout, on any device, without losing focus on important content.
Optimize Image Performance
Dynamically determine the most efficient format for every image, based on the content and viewing browser, and automatically switch formats to optimize delivery.
Automatically compress the quality of every image based on the image content, to produce a perceptually fine image, while minimizing the file size.
<%= 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")
Apply Artistic Effects and Filters
Enhance the visual appearance of images using a wide range of effects and filters that provide additional control over the behavior of desired effects.
- Sepia
- Increase Saturation
- Decrease Saturation
- Grayscale
- Black & White
- Change Hue
- Change Brightness
- Change Contrast
- Blur
- Sharpen
- Vibrance
- Oil Paint
- Pixelate
- Vignette
- Auto Color
- Auto Brightness
- Artistic Red Rock filter
- Artistic Eucalyptus filter
- Artistic Audrey filter
- Artistic Frost filter
- Artistic Primavera filter
- Artistic Incognito filter
- Artistic Hokusai filter
- Artistic Linen filter
Apply “if...else” Conditions for Transformations

Every image has different characteristics. Dynamically manipulate images based on individual characteristics and viewing requirements to ensure an optimal visual experience for every user.
Simply specify a condition using “if....else” parameters with the associated transformations to manipulate any 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.
<%= cl_image_tag("group.jpg", :width => 365, :height => 133, :crop => :fill) %>
<?php echo cl_image_tag("group.jpg", array("width" => 365, "height" => 133, "crop" => "fill")); ?>
cloudinary.image("group.jpg", { width: 365, height: 133, crop: "fill" })
cloudinary.CloudinaryImage("group.jpg").image(width=365, height=133, crop="fill")
$.cloudinary.image("group.jpg", { width: 365, height: 133, crop: "fill" })
<cl-image public-id="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");
cloudinary.url format "jpg" transformation Transformation().w_(100).h_(130).c_("fill") imageTag "group"
cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(365).setHeight(133) .setCrop(CLDTransformation.CLDCrop.fill)).generate("group.jpg")
MediaManager.get().url().transformation( new Transformation().width(365).height(133).crop("fill")).generate("group.jpg");