Cloudinary Blog

Instagram-like Filters with Cloudinary

By David Walsh
Instagram-like Filters with Cloudinary

This is a reposting of an article written by David Walsh. Check out his blog HERE!
Apps like Instagram are a testament to how brilliant a few color modifications can make a photo. We've seen hundreds of Instagram clones pop up, and even the CSS and Canvas specs have a

filter property which allows us to modify imagery. As nice as those APIs are, they only modify an image for view on the client side -- once the user tries to save the photo, they get the unmodified version. So how can you generate Instagram-like photos with artisitic filters? The awesome media service Cloudinary provides an easy method to generate artistic, filtered photos with a very simple API. Let's have a look!

Cloudinary Filters

Uploading an Image

The best way to interact with images is initially uploading them to Cloudinary, which is incredibly easy. Cloudinary provides APIs for all popular web languages, like PHP, Node.js, Python, Java, etc. The following will upload our sample image using Node.js:

var cloudinary = require('cloudinary');

cloudinary.config({
	cloud_name: 'david-walsh-blog',
	api_key: '##############',
	api_secret: '##############'
});

cloudinary.uploader.upload('landscape.jpg', function(result) {
	console.log(cloudinary.image('landscape.jpg'));

    /*
    <img src='https://res.cloudinary.com/david-walsh-blog/image/upload/landscape.jpg' />
    */
});

With the image uploaded to Cloudinary, we can perform any number of transformations, background removals, and other optimizations, either on the fly via URL modification or via their sophisticated API.

page load speed

Image Enhancement

Sometimes adding a few slight color modifications to a given image can provide the small improvement that keeps the image looking "natural" but spectacular. Cloudinary provides a useful set of enhancement transformations to bring out the vibrance in photos, including: improve, gamma, auto_brightness, auto_contrast, auto_color, fill_light, vibrance, contrast, and viesus_correct. The following URL pattern will get you a few of those enhancements:

<img src='https://res.cloudinary.com/david-walsh-blog/image/upload/e_auto_brightness/landscape.jpg' />

<img src='https://res.cloudinary.com/david-walsh-blog/image/upload/e_gamma/landscape.jpg' />

Check out how awesome each of these enhancements make our sample image look:

Cloudinary Filters

Sometimes the minimalist enhancement makes the image look best!

Adding Artistic Filters to Images

If you want to bring artistic flair to an image, or even let your users bring filters to their imagery (via your awesome app that uses Cloudinary, no doubt), you can bring those images to life by adding an art:(effect-name) effect to the image:

<img src='https://res.cloudinary.com/david-walsh-blog/image/upload/e_art:aurora/landscape.jpg' />

<img src='https://res.cloudinary.com/david-walsh-blog/image/upload/e_art:audrey/landscape.jpg' />

You can customize the level of effect application in most cases with this pattern:

<-- 70% -->
<img src='https://res.cloudinary.com/david-walsh-blog/image/upload/e_art:audrey:70/landscape.jpg' />

Check out a showcase of transformations from our sample image:

Cloudinary Filters

It's amazing what advanced math calculations can do to the display of an image. A simple image taken with any camera can be made to look majestic if you have a service like Cloudinary to bring the filter to fruition.

My second week at Mozilla I won a competition amongst the web developers to create something amazing, and what I created was a photo filtering app like Cloudinary. The problem was it used the canvas API which doesn't save out its filters, and it required knowing the math behind the filtering. However cute my app was, it was a nightmare for both users and developers. Cloudinary's API for using simple and artistic filters is incredibly easy -- coding your own route probably isn't worth it. Artistic filters are just another reason why you should jump at Cloudinary for your personal and app media!


David Walsh David Walsh is Senior Software Engineer at Mozilla, having worked extensively on the Mozilla Developer Network, Firefox OS TV, WebVR, internal tooling, and several other Mozilla efforts. He shares his knowledge on his blog at http://davidwalsh.name. You can also find him at @davidwalshblog on Twitter.

Recent Blog Posts

New Learning Pathways From the Cloudinary Academy

In December 2019, Cloudinary launched its customer education platform, the Cloudinary Academy, replete with courses taught by the company’s experts on developer-oriented products and digital asset management (DAM) solution. The courses comprise interactive lessons and hands-on assignments, a proven way of familiarizing the audience with the course material and illustrating it with live examples.

Read more
Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more