How does Instagram develop their filters?

Answer from Kevin Systrom, CEO, co-founder

It’s really a combination of a bunch of different methods. In some cases we draw on top of images, in others we do pixel math. It really depends on the effect we’re going for.

For instance, Lomo-fi really isn’t much more than the image with boosted contrast. Whereas Toaster is one of the most complex (and slow, yet popular) filters we have with multiple passes and drawing.

I’d give up more info, but it’s our secret sauce 🙂 Maybe some day…

————————————————————————————————————–

Answer from Changneng Chen, Software Engineer & Instagram fans

I happened to research on Instagram’s image filter a year ago and have a good approach to this question.

An Instagram image filter can be departed into 4 following processing steps:

Perform an independent RGB color transformation on the original image pixel by pixel to increace contrast or make color cast. Here independent transformation means two things: First, value of one color channel doesn’t impact value of the other channels; Second, pixels at different positions don’t affect each other. So the color transformation can be explained in such expressions:

Rxy’ = transformRedChannel(Rxy, x, y)
Gxy’ = transformGreenChannel(Gxy, x, y)
Bxy’ = transformBlueChannel(Bxy, x, y)

In the above expression, Rxy stands for the the red channel value of a pixel at position(x, y) in the original image which is in range 0~255 and Rxy’ stands for that in the goal image. The same holds for blue and green channels.

Since the function can be described by a [0, 255] -> [0, 255] mapping array, it is easy to hack the Instagram image filter function using 255 different gray image to generate the mapping array.

This decode procedure can be simplified by using only one gray image input if you just want to make an approximate approach.

With the above processing, the color transformation can be described in an x-y function chart as below. This step makes the core effect for the filter.

This is the most important algorithm for Instagram’s image filter.

Overlay a circle back-group png image.This image is shown below and can be found in the Instagram’s ipa file.

So in this step it creates a vignette effect. This step is only used in some of the Instagram filters.
Overlay a background png image as decorative grain.This step is only used in a few filters. It’s seems similar to adding random noise to an image.
Add a border or frame.This step is easy to understand and the frame image is shown as below: