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

Manipulation highlights

Resize and Crop
Optimized JPEG Custom Crop
Face Thumbnail
Rotated Circular Thumbnail
Effects and Zoom
Image Overlay Watermark
Optimized WebP
Text Overlay, Border, Shadow

Advanced resizing and cropping

Scale
Fill
Fit
Pad
Crop
Limit
Percentage Based
Custom Coordinates

Face detection based cropping and effects

Face Cropping
Face Thumbnail
Face Blurring
Face Overlays
Multiple Faces Cropping
Multiple Faces Thumbnail
Pixelate Faces

Rotate, flip and alter image shapes

Image Rotation
Arbitrary Rotation
Automatic Rotation
Vertical Flip
Horizontal Flip
Rounded Corners
Ellipses
Circles

Photo effects and filters

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

Text overlays, watermarks and image overlays

Image Overlay
Image Underlay
Watermarks
Text Overlay
Text Styles
Custom shape cropping

PDF and Office document processing

Thumbnail Creation
Page Extraction
Thumbnail Manipulation
Word Document Thumbnail

Sprite image and CSS generation

Sprite PNG
Normalize Dimensions
Manipulte Sprite Members

Convert image formats and modify quality

JPG 90% Quality
JPG 50% Quality
Semi-transparent PNG
GIF
WebP
JPEG-XR

Chain multiple transformations together

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

Automatic resizing and scaling

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

Content-aware cropping

Automatically 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.

Learn more about responsive images

Optimize Image Performance

Dynamic format conversion

Dynamically determine the most efficient format for every image, based on the content and viewing browser, and automatically switch formats to optimize delivery.

Automatic quality compression

Automatically compress the quality of every image based on the image content, to produce a perceptually fine image, while minimizing the file size.

Rails
PHP
Node.js
Django
jQuery
Java
.NET
Android

<%= 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

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...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.

Rails
PHP
Node.js
Django
jQuery
Angular
Java
.NET
Scala
iOS
Android

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