Cloudinary Cookbook
thumbnail
Resizing an image to fill given dimensions

Resize your images to fill specified dimensions by setting the width and height (w and h in URLs), while setting the crop parameter to fill (c_fill in URLs). This will resize and crop the image so an image with the exact specified dimensions is generated.

thumbnail
Resize an image

Resize your images by setting the width and/or height parameters (w and h in URLs). When resizing using Cloudinary's URL-based transformations, Cloudinary will automatically apply the scale crop mode. Alternatively, you can use any one of our many supported crop modes.

thumbnail
Face detection-based image cropping

With Cloudinary, cropping an image can be easily done on-the-fly in the cloud. Cloudinary can automatically detect faces' position within an image, and crop a thumbnail based on the detected face.

thumbnail
Overlay an image over detected faces

Cloudinary automatically detects and searches for faces within an image. You can overlay another image of your choice on top of those detected faces.

thumbnail
Limiting an image by specified dimensions

Keep the original image aspect ratio and all its parts visible, and just limit it's size. Specify the width and height (w and h in URLs) and set the crop parameter to limit. This will create an image that does not exceed the given width and height.

thumbnail
Converting an image format

Convert your images to any other format either by simply changing the extension of the file, or by setting the format parameter. You can either covert the image's format while uploading or upload the image as is and dynamically convert its format on delivery.

thumbnail
Trim photo background

Use Cloudinary trimming effect to easilty apply triming, and remove edges around your images.

thumbnail
Support Short Videos as Profile Video in Your Application

Video profiles are an awesome way to allow your users to inject some personality into their profile in dynamic and creative ways.

thumbnail
Fitting an image within specified dimensions

Change image size to fit in given width and height while retaining original proportions.

thumbnail
Crop pictures by custom coordinates

Use Cloudinary for cropping your image based on custom/fixed coordinates. Use this method when you know beforehand what the correct absolute cropping coordinates are. This is very useful when your users manually select the region to crop out of the original image.

thumbnail
Boomerang effect

Make a boomerang out of your video by playing it in both directions and modifying its speed.

thumbnail
Blur or pixelate faces

Hide faces in your images by telling Cloudinary to either blur or automatically pixelate the detected faces.

thumbnail
Adjust the hue value of images

Create a different mixture of colors for your images with the Hue filter.

thumbnail
Using content aware padding

Cloudinary offers many different options for setting backgrounds for your images. You can set it to be a specific color or you can make the background color set automatically based on the image's content

thumbnail
Rounded profile picture with initials

You can automatically fetch social networks' profile pictures by setting the type parameter to the required network (e.g., facebook), then apply any further transformations and even add your user's initials as a text overlay.

thumbnail
Pixelate an image or a region

You can choose to pixelate the whole image or just a certain region of the image. Apply a pixelization effect to an image by setting the effect parameter to pixelate (e_pixelate in URLs).

thumbnail
Generate your photo collage online

Take your base image and use Cloudinary's overlay parameter (l in URLs) to add any further images. Set width, height and the required crop mode, and any further transformations, effects and texts you like.

thumbnail
Custom shapes cut out

You can easily cut out any shape from one of your images and overlay it on a top of a different image of your choice

thumbnail
Convert image to grayscale

Convert images to grayscale by using Cloudinary grayscale effect. You can add further transformations in order to achieve the exact result you need.

thumbnail
Automatically improve photos

Make all of your website's images and thumbnails to look much clearer and vivid by automatically improving their visual quality.

thumbnail
Text overlay positioning

Customize text overlay's position by setting the gravity (g in URLs) and the optional offset of the x and y. While the default text positioning ('gravity') is center, you can place your text in any other area of the image (even outside the image's boundaries!).

thumbnail
Relative size overlays

Lean how to resize overlays to a given percentage of the main image, either related to width, height or both.

thumbnail
Customize color saturation

Increase or decresae the saturation level of your images on the fly using Cloudinary saturation effect.

thumbnail
Create Beautiful Background Changing Animated Gifs for Your Next Email Campaign

If a picture is worth a thousand words, an animated one must be worth even more. Nowadays, email marketers are pushing the boundaries of email design, by using animated GIFs to display their products and services in action.

thumbnail
Apply a sepia effect

Add a warm, antique feeling to your photos using the 'Sepia' filter effect

thumbnail
Turn your pictures in to old photographs

You don't have to wait to go to a theme park to take an old-timey photograph with your family. Instead, you can use Cloudinary to quickly and easily create this effect on any of your current images.

thumbnail
Leveraging the Image-Overlay Effect for Preview of Customized Engravings

To add custom engravings to your products, such as gadgets like watches, electronic devices, and the like, you could use the paid tools on the market. Why not leverage Cloudinary to do so? It’s a simple tool that seamlessly delivers excellent results

thumbnail
Image rotation

Rotate an image by setting the angle parameter (a in URLs) to a given value representing the degree of rotation.

thumbnail
Creating a Bevel effect

Use Cloudinary varaibles, overlays, colorize and cut-out capabilities to create a generalized transformation URL that will add bevel efffect to any image.

thumbnail
Change image opacity

Control the opacity level of your images using Cloudinary opacity effect. You can control both the main image or any overlaid images of your choosing.

thumbnail
Applying rounded corners to an image

Many website designs call for images with rounded corners, while some websites require images with a complete circular or oval (ellipse) crop. Both of those can be easily achieved using Cloudinary radius parameter.

thumbnail
Add a border to images

Easily add a border to your images. The border's color, width and opacity can be customized dynamically, and borders can be applied either on main images or on overlaid images.

thumbnail
Use images as text textures

Instead of coloring your text with a solid color, choose an image you like, and use it to fill the text and give it a cool and unique texture.

thumbnail
Text overlays flowing together irrespective of text size

You can add text dynamically to the image by using adding a text overlay on top of it using our overlay advanced features.

thumbnail
Increase fill light of photos

Fill your images with a lighting effect. This is very handy when dealing with darker images.

thumbnail
Center objects using trim

Center an object within an image with a solid background. Do this by first trimming the background around the object and then padding and resizing the canvas to the image's initial dimensions.

thumbnail
Adjust image brightness

Dynamically adjust the brightness of an image. You can set the birghtness level either manually, or tell Cloudinary to automatically balance it for you.

thumbnail
Sharpen an image

Use Cloudinary to sharpen your images easily and dynamically. Image sharpening can be applied by setting the effect parameter to sharpen (e_sharpen in URLs). You can play with sharpening level to get you the exact effect you need.

thumbnail
Overlaying social profile pictures on top of images

You can overlay profile picture from a social network on top of another image by setting the overlayparameter (l in URLs) to the corresponding network and user name. Cloudinary will automatically fetch the latest profile picture of social network sites.

thumbnail
Custom shapes cropping

You can crop an image based on any custom shape. Do this by having your own custom image as a mask for cropping, and passing it as an overlay to your transformation.

thumbnail
Create your own Duotone filter

A cool new design trend popularized by Shopify is Duotone imagery. You can do this easily using Cloudinary effects.

thumbnail
Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images

thumbnail
Add a shadow effect to an image

Add a shadow effect to any image. You can even customize the offsets of the shadow and its blurriness level.

thumbnail
Streamlining the Process of Product Image Creation

Whether you've just launched a Shopify site for your latest product, or you're a multibillion dollar retailer with expansive design teams, you probably have significant room to improve and make more efficient the process of how raw photographs are transformed into compelling images on your website’s product pages. You should take a look at this recipe to see how this can be easily automated.

thumbnail
Generating Video Preview Clips

Creating a dynamic and engaging animated video preview (as opposed to a static image) brings along many benefits. Take a look on how you can leverage Cloudinary for that.

thumbnail
Extract frames from an animated GIF

Extract frames from an animated GIF, you can choose which frame to deliver, apply any further image manipulations including resizing, cropping, overlays and much more.

thumbnail
Convert PDF to JPG

Convert your PDF files to a JPG thumbnail. You can even specify the target thumbnail dimensions. If your PDF file has multiple pages, you can specify the specific page you wish to convert

thumbnail
Color a picture

Color an image to any other color simply by using Cloudinary colorize effect. The color can be given by either it's name (e.g., green) or by an RGB value (e.g., 00FF00).

thumbnail
Automatically Flip Videos

Rotating and flipping videos on Cloudinary is a cakewalk. All you need is just to set an angle you desire or to choose one from the exisitng values.

thumbnail
Adding watermarks as an overlay

Watermarks can be easily added to your images. Watermarks can be used for either overlaying another image, adding your logo, a custom user badge, or any other use-case you might have.

thumbnail
Generate a profile completeness meter

Generate a great looking profile completeness meter to notify your users of their progress. Whether it's for profile page details, survey progress, or just to show your users the percentage of the completion of any task. Use Cloudinary's powerful manipulation tools to generate just what you need.

thumbnail
Adding Video Watermark as an Overlay

Adding watermarks to videos on Cloudinary yields many enhancements, involving only a few simple steps.

thumbnail
Add a text to an image

Add dynamic text on top of any image, on-the-fly. You can use any one of the hundreds of fonts available by Google Fonts, or even use your own custom font.