5

What is the pixel-level explanation of the fade effect, that was first popularized by Instagram? I want to implement this effect programmatically—that is, I want to understand what this effect is doing to each pixel.

enter image description here

Also, if anyone could point me to resources from which I can learn more about how image filters are implemented, that would be great.

trichoplax is on Codidact now
  • 6,292
  • 3
  • 23
  • 69
cauliflower
  • 53
  • 3
  • 3
    Very easy way to achieve a similar look is to just add a small value to the color or each pixel, then clamp to max (255 or 1). It will make the image look more "washed out". – glampert Dec 25 '15 at 22:39

1 Answers1

5

The effect in the photo is very close to a simple scale-bias per pixel. After a bit of tweaking, I found that applying the transformation: $x' = 0.77x + 38$ to the raw pixel values (as bytes) gives something quite close to your output:

transformed image

In this case the effect of the scale-bias is to reduce the contrast (scale factor < 1) while keeping the overall brightness about the same.

Example Python code (with numpy and pillow) to do this transformation:

import numpy as np
from PIL import Image
a = np.array(Image.open("input.png"), dtype=np.float32)
b = a * 0.77 + 38
Image.fromarray(np.uint8(np.rint(b))).save("output.png")

For learning how to implement many basic image processing operations, I've found these Image Processing Operator Worksheets from the University of Edinburgh helpful.

Nathan Reed
  • 25,002
  • 2
  • 68
  • 107