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

  • Resize and Crop
    Resize and Crop
  • Optimized JPEG Custom Crop
    Optimized JPEG Custom Crop
  • Face Thumbnail
    Face Thumbnail
  • Rotated Circular Thumbnail
    Rotated Circular Thumbnail
  • Effects and Zoom
    Effects and Zoom
  • Image Overlay Watermark
    Image Overlay Watermark
  • Optimized WebP
    Optimized WebP
  • Text Overlay, Border, Shadow
    Text Overlay, Border, Shadow
  • Scale
    Scale
  • Fill
    Fill
  • Fit
    Fit
  • Pad
    Pad
  • Crop
    Crop
  • Limit
    Limit
  • Percentage Based
    Percentage Based
  • Custom Coordinates
    Custom Coordinates
  • Face Cropping
    Face Cropping
  • Face Thumbnail
    Face Thumbnail
  • Face Blurring
    Face Blurring
  • Face Overlays
    Face Overlays
  • Multiple Faces Cropping
    Multiple Faces Cropping
  • Multiple Faces Thumbnail
    Multiple Faces Thumbnail
  • Pixelate Faces
    Pixelate Faces
  • Image Rotation
    Image Rotation
  • Arbitrary Rotation
    Arbitrary Rotation
  • Automatic Rotation
    Automatic Rotation
  • Vertical Flip
    Vertical Flip
  • Horizontal Flip
    Horizontal Flip
  • Rounded Corners
    Rounded Corners
  • Ellipses
    Ellipses
  • Circles
    Circles
  • Sepia
    Sepia
  • Increase Saturation
    Increase Saturation
  • Decrease Saturation
    Decrease Saturation
  • Grayscale
    Grayscale
  • Black & White
    Black & White
  • Change Hue
    Change Hue
  • Change Brightness
    Change Brightness
  • Change Contrast
    Change Contrast
  • Blur
    Blur
  • Sharpen
    Sharpen
  • Vibrance
    Vibrance
  • Oil Paint
    Oil Paint
  • Pixelate
    Pixelate
  • Vignette
    Vignette
  • Auto Color
    Auto Color
  • Auto Brightness
    Auto Brightness
  • Image Overlay
    Image Overlay
  • Image Underlay
    Image Underlay
  • Watermarks
    Watermarks
  • Text Overlay
    Text Overlay
  • Text Styles
    Text Styles
  • Custom shape cropping
    Custom shape cropping
  • Thumbnail Creation
    Thumbnail Creation
  • Page Extraction
    Page Extraction
  • Thumbnail Manipulation
    Thumbnail Manipulation
  • Word Document Thumbnail
    Word Document Thumbnail
  • Sprite PNG
    Sprite PNG
  • Normalize Dimensions
    Normalize Dimensions
  • Manipulte Sprite Members
    Manipulte Sprite Members
  • JPG 90% Quality
    JPG 90% Quality
  • JPG 50% Quality
    JPG 50% Quality
  • Semi-transparent PNG
    Semi-transparent PNG
  • GIF
    GIF
  • WebP
    WebP
  • JPEG-XR
    JPEG-XR
  • Facebook Profile, Face Thumbnail, Sepia Effect, Rotation, Watermark
    Facebook Profile, Face Thumbnail, Sepia Effect, Rotation, Watermark
  • Video Thumbnail, Face Cropping, Rounded Corners, Decrease Saturation
    Video Thumbnail, Face Cropping, Rounded Corners, Decrease Saturation
  • Uploaded Images, Multiple Overlays, Gravity Based Square Filling, Custom Coordinates
    Uploaded Images, Multiple Overlays, Gravity Based Square Filling, Custom Coordinates
  • Facebook Pictures, Multiple Overlays, Face Detection, Rotation, Flipping, Hue Changes
    Facebook Pictures, Multiple Overlays, Face Detection, Rotation, Flipping, Hue Changes

Adapt Images for Responsive Design

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.

<%= 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
    Sepia
  • Increase Saturation
    Increase Saturation
  • Decrease Saturation
    Decrease Saturation
  • Grayscale
    Grayscale
  • Black & White
    Black & White
  • Change Hue
    Change Hue
  • Change Brightness
    Change Brightness
  • Change Contrast
    Change Contrast
  • Blur
    Blur
  • Sharpen
    Sharpen
  • Vibrance
    Vibrance
  • Oil Paint
    Oil Paint
  • Pixelate
    Pixelate
  • Vignette
    Vignette
  • Auto Color
    Auto Color
  • Auto Brightness
    Auto Brightness
  • Artistic Red Rock filter
    Artistic Red Rock filter
  • Artistic Eucalyptus filter
    Artistic Eucalyptus filter
  • Artistic Audrey filter
    Artistic Audrey filter
  • Artistic Frost filter
    Artistic Frost filter
  • Artistic Primavera filter
    Artistic Primavera filter
  • Artistic Incognito filter
    Artistic Incognito filter
  • Artistic Hokusai filter
    Artistic Hokusai filter
  • Artistic Linen 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

Conditional image 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 url:@"group.jpg" options:@{@"transformation": 
  [[CLTransformation transformation] 
    setParams: @{@"width": @365, @"height": @133, @"crop": @"fill"}]}];
cloudinary.url().transformation(
  new Transformation().width(365).height(133).crop("fill")).generate("group.jpg");