Cloudinary Blog

Image manipulation recipes in the cloud. The Cloudinary Cookbook

Image manipulation recipes in the cloud

How do you crop an image to a custom shape? How do you add a shadow effect to an image with transparency? How do you add text overlay to an image without using HTML?

If you build or maintain a website with a lot of images, you've probably had many questions like these. Most developers who work with images have scripts or tools that can achieve dozens if not hundreds of image manipulations - from basics like crop and resize, to advanced stuff like shadow and transparency, watermarks, face detection, etc. But how do you mix and match these manipulations correctly to solve a problem or achieve a certain effect?

Cloudinary is a cloud-based image management service that lets you upload your website's images to the cloud, and perform a large variety of image manipulations on them. Our customers frequently share with us new, exciting and occasionally surprising results achieved by mixing and matching from Cloudinary's image manipulation toolset. We wanted to share these experiences with you, in the form of the Cloudinary Cookbook.

The Cloudinary Cookbook is a collection of examples showing how to do complex things with images, by combining different image manipulations, or tweaking a specific manipulation to achieve a certain result. The cookbook is built of recipes that include sample images, code in all development frameworks, tips and guidelines and links to additional resources.

For those who don't yet use Cloudinary, our Cookbook should provide some inspiration about cool things you can achieve with just a few image manipulations put together. But note that some of our examples include advanced manipulations that are unique to Cloudinary :) For new or existing users, the cookbook will be a way to learn from others' experiences or from the Cloudinary team's knowledge, and achieve cool effects much faster, with code samples you can copy-paste (with minor changes) into your software project.

Using the Cookbook - Cloudinary's collection of image manipulation examples

The Cloudinary Cookbook is available here:

Our cookbook consists of recipes. The most popular ones are listed in the main page, which you can see in the screenshot below. Each recipe is assigned with one or more tags; click a tag to browse recipes by subject. On the main page or tag pages you can see snippets of recipes with thumbnails of some of the example images, a short description and the code that generates the image effect.

Cloudinary does image manipulations on-the-fly in the cloud, using a dynamic URL that specifies exactly how the image should be modified. You can provide this image manipulation URL directly, or use our client libraries for Ruby on Rails, PHP, Python/Django, Node.js, Java, .Net or jQuery, to construct the required image manipulation URL with a single line of code.

Cookbook recipes

Each recipe snippet includes an example of an image manipulation URL that could generate this image, and code samples that show how to build this URL with the transformation parameters that need to be applied. Click on the tabs of the framework names to view the sample code for the development framework you use.

Cookbook recipe snippet

Clicking on a recipe snippet leads you to the full recipe page. As you can see below, in the full page, larger images are displayed, there are additional image manipulation examples, code samples, and more details on how the manipulations work.

You can comment on each specific recipe, like it on Facebook or share it on Twitter or Google+, and also add your comment in the thread at the bottom of the page.

Cookbook recipe page

We're working on adding many more recipes, most of them requested or suggested by our users. We already have a few dozen recipes available, including cropping image to a custom shape, face-detection based image cropping, using images as text textures, adding watermarks as overlay images, add shadow effect to an image, auto-generating a photo collage and more.

Summary

Cloudinary's service is not just about image manipulation (we also provide cloud storage of images, optimized delivery via CDN, image administration and management), but it’s a key component of our service. Our image manipulation capabilities are rich and always expanding. You can resize and crop images based on face detection, rotate photos, add overlays and watermarks, add text layers, adjust colors, apply effects and filters, chain multiple transformations, and much more.

Since Cloudinary's service was publicly launched more than two years ago, our customers kept surprising us with an impressive set of results they generated using the image manipulation ingredients that we provide. In addition, we kept expanding our manipulation capabilities according to the requests of many of our customers. The new Cloudinary Cookbook is the place for Cloudinary users to share the results they've been generating with our cloud-based image manipulation features.

We have big plans for the Cookbook - we're already working on dozens of additional recipes, and are encouraging our users to share their cool recipes with the community and to vote on recipes of other users. Do you have a tried-and-tested recipe of your own? Contact us, let us know and we'll be happy to add it to the Cookbook.

Recent Blog Posts

Cloudinary Product Gallery Enables Dynamic Buyer Experience

We live in a world where we spend increasingly more time online. As our routines change and adapt to new trends and technologies, we perform more and more of our daily activities in virtual environments. A key example of this is shopping. There are many reasons why online shopping has become so attractive for many buyers. A near endless variety of products is accessible from the palm of your hand. Customer reviews give buyers more confidence in their decisions. It's increasingly easy to search for attractive prices. And the list goes on. But a customer's desire to "touch" or "feel" the product is an interactive experience that can be hard to overcome when shopping online.

Read more
A Guide to Website Image Optimization and Performance

Part 1 of this series delves into the background for this guide. Here in part 2 are the ins and outs.

Wait, hear me out. I know, we just talked about this: Nobody is sheepishly pleading you, “Please, might we have just one more image on the page?” No, I’m not telling you to pick that particular fight. Instead, use a little smoke and mirrors to avoid requests for images that your audience needn’t render right away and might never need at all while loading them asynchronously—only as needed.

Read more
A Guide to Image Optimization for Website Performance

I’ve spent a lot of time thinking about the rules of putting images on the web.

For such a flexible medium as the web, software development can feel like a painstaking, rules-oriented game—an errant comma might break a build, a missing semicolon might wipe out an entire page. For a long time, the laws of image rendering seemed similarly cut-and-dry: For example, if your markups contained an img element , the singular content of its src attribute would be foisted on the audience regardless of their browsing context, period.

Read more
Digital Asset Management Platform: Meeting Customer Expectations

Consumers today expect media-rich experiences. No longer a novelty, it’s second nature to swipe through multiple photos on mobile apps, zoom in on product images for a closer look, visualize online travel reviews, socialize cool video clips while browsing, and encounter brand messages when walking into brick-and-mortar stores. These experiences weave together visual cues and clues with relevant content to create meaning and more authentic connections for customers.

Read more
How to Customize Cloudinary's eCommerce Android App

Recently we added the Cloudinary Demo - eCommerce App to the Google Play Store. This app demonstrates the best practices for optimal delivery of images on a storefront, including category pages, product pages, and a shopping cart. At the time, we published Introducing the Cloudinary Demo Android App, Part 1, which provided an under-the-hood tour of how the eCommerce Android App was designed and how Cloudinary was integrated throughout.

Read more