
Bringing Wide Color to Instagram - natthub
https://engineering.instagram.com/bringing-wide-color-to-instagram-5a5481802d7d#.44soiw7he
======
mikeyk
Here if anyone has questions on the implementation or such.

~~~
dTal
"When we started this project, none of us at IG were deep experts in color."

This is pretty astonishing to me. I always thought applying smartly designed
color filters to pictures was basically Instagram's entire value proposition.
In particular, I would have thought that designing filters to emulate the look
and feel of various old films would have taken some fairly involved imaging
knowledge. How did Instagram get so far without color experts?

~~~
elastic_church
Because it isn't complicated or novel to make compressed 8-bit jpegs have
color filters. There are tools for the job and they've been around for a long
time.

Working in a different color space than standard requires a little bit of
familiarity and finesse that modifying 8-bit jpegs for consumption on the
internet did not require.

Many photographers and printers are familiar with this dilemma in a variety of
circumstances, where the cameras create images in a different color space and
higher bit depth that can't be perceived at all with any technology or the
human eye.

~~~
matt4077
I'm sure the comment you're replying to wasn't thinking of the algorithm that
_applies_ a filter to a jpeg, but the process by which that filter is created
in the first place. The assumption being that there's some sort of theory to
colour that allows you to systematically improve the aesthetic qualities of
images.

As an analogy, think of the value music theory (i. e.
[https://en.wikipedia.org/wiki/Scale_(music)#Harmonic_content](https://en.wikipedia.org/wiki/Scale_\(music\)#Harmonic_content))
for composition.

~~~
elastic_church
The creative process isn't novel. There isn't even the capability of any layer
masking in most mobile apps, including Instagram, compared to pre-existing
more robust tools on desktop (and other mobile apps), severely limiting the
'technical interestingness' to begin with.

------
andresgottlieb
Note that the red test image is only valid for iOS devices, since in Android
you can see the Instagram logo even though it doesn't support wide color

~~~
jessriedel
Can't see the logo on OSX Sierra on my 2014 MacBook Pro Retina 13in.

~~~
tunaoftheland
I couldn't either on my MBP late 2013 until I changed the Display Profile to
"Display P3". There are other profiles that will show the logo, too, like
"Adobe RGB (1998)"

~~~
eridius
If you change your display profile like this you're going to have incorrect
color rendering, so don't forget to change it back after you've had your fun
looking at the (inaccurately-rendered) image.

------
yladiz
I'm not sure if this is different in the iPhone 7, but the 6S is pretty
terrible at color representation in photos, specifically when dealing with
neon lights. The iPhone tends to overexpose the neon light to make up for the
surrounding being darker, so to get a 'decent' shot, I have to down the
exposure by about 2/3 on the 'brightness' in the normal Camera app. But in
general, it has a hard time showing as good of color as you would be able to
capture in a better camera. For example, I've taken some photos of museum
paintings during a visit, and the colors tends to be a little darker and not
truly representative (yellows appear like mustard rather than a brighter
yellow, for example). I'd love to be able to take more color accurate photos,
and it would be more worth it to get the iPhone 7 if that's the case.

~~~
therealmarv
That's more a problem of the camera and ISP and not color management and
display.

~~~
yladiz
That's what I figured. I hope that the sensor becomes better and better, so
that one day I can take great neon light photos (as well as see the correct
color of red).

------
grenoire
I did not know that Instagram was using OpenGL for processing. That's pretty
neat, given the capabilities of OpenGL. I'm looking forward to seeing more
filters with more lifelike Polaroid effects.

But before that, could they not convert images to horribly encoded JPEGs? I
get it, bandwidth and costs, but it's an image service that still drowns in
its own... when it gets an image with strong reds and blues.

~~~
mikeyk
We started using OpenGL in 2011. Our CPU-based image filters used to take 4+
seconds with pixel-by-pixel manipulation, and now can render 30+ times per
second.

If you have some sample images where the current image pipeline is going wrong
let me know and we can look into improving.

~~~
nrjdhsbsid
Instead of fixing the horrible JPEG encoding can you please add support for
webp? It's quite a bit smaller and well supported with polyfills since it's
just a single vp8 frame

~~~
tossedaway334
polyfills in general are a really awful user experience.

They are typically pushed by people who use the latest chrome, so they have an
excuse not to care about other browsers.

Their preformance, and usability is almost invariably terrible.

~~~
dbbk
You don't need a polyfill to deploy Webp. Chrome automatically sends webp in
the Accept headers for images, so on the CDN level you could implement some
logic to seamlessly swap in Webp images for the browsers that support it.
Imgix does this for instance.

------
gojomo
Link for viewing 'canary image' in browser, without triggering
download/dropbox:

[https://imgur.com/a/v82GI](https://imgur.com/a/v82GI)

(Indeed, I can see a faint Instagram logo on my iPhone7, but not my older
rMBP.)

~~~
phinnaeus
Imgur seems to be changing the profile or somesuch because I can see the logo
when I downloaded the image but not on the imgur image here.

~~~
NSAID
Same.

Here's the link from the article with the download flag removed:

[https://www.dropbox.com/s/tgarynpj65ouafd/insta-
logo.png](https://www.dropbox.com/s/tgarynpj65ouafd/insta-logo.png)

~~~
howderek
Also changes the profile, I can see the instagram logo here but not on the
download

~~~
squeaky-clean
Really strange! I get the same behavior. I thought it was maybe Chrome vs my
image viewer, but if I open the downloaded image with Chrome, it's just pure
red, but the preview in Dropbox I definitely (faintly) see the logo.

If I right click and save the dropbox preview, I get a 14kb image, but the
downloaded image is 29kb. As far as I can tell they're both PNGs with the same
bit depth.

------
crymer11
If you have a Macbook and can't see the logo on the canary image, try changing
the color profile for your display. On my mid-2014 rMBP, the default color
profile was "Color LCD", but I could change it to "Display P3" and see the
logo.

To make the change: System Preferences -> Displays -> Color

~~~
mschuster91
Thanks for the hint. On my 2015 Retina MBP, when opening the IG image in
Preview, I see the IG logo. However, when dragging the image into Chrome, I do
not see it.

How do I get Chrome to do proper rendering?

~~~
matt4077
Chrome does something strange with colors on macOS. Colors always render
visibly different than Safari.

That being said, the logo is visible in Chrome for (using a Dell display).

------
petters
"What every coder should know about gamma" may be of interest here.
[http://blog.johnnovak.net/2016/09/21/what-every-coder-
should...](http://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-
about-gamma/)

------
eslaught
Are browsers generally color-correct? I was going through the Webkit wide
color examples and was getting different visual results on different
browsers[1]:

[https://webkit.org/blog-files/color-gamut/](https://webkit.org/blog-
files/color-gamut/)

[1]: Compared Safari, Firefox and Chrome on a 2016 MacBook Pro w/ Touchbar
running macOS 10.12.

~~~
mikeyk
Browsers are all over the place, unfortunately. It's part of why sRGB because
the only reasonable color profile for Web use. I think we'll see wide color
become common in apps before the Web.

~~~
gsnedders
All over the place in what way? Support for different color profiles? Actually
handling color spaces _at all_? The fact that there's no consistency when it
comes to untagged images? The mess which is plugins? The ability to specific
CSS colors in a specific color space?

------
therealmarv
When on Android? I also opened a bug on Android Bugtracker:
[https://code.google.com/p/android/issues/detail?id=225281](https://code.google.com/p/android/issues/detail?id=225281)
and it is marked as a small issue. On Android we are lacking color management
and are only restricted to sRGB. Original Wide Gamut and P3 images look dull
on Android devices. I also want good wide P3 colors and color management
without buying an iPhone.

~~~
simonjgreen
The canary image in the article displays fine on my S7

------
planteen
Cool article.

Another things worth mentioning is that lots of professional photo & graphics
people have been using the Adobe RGB color space for almost 20 years which is
"wider" than sRGB.

------
ramzyo
Awesome, would be great to see in-app support for 2x optical zoom on the
iPhone 7+ next

~~~
mikeyk
We built this in already! We don't have a "1x" or "2x" indicator, but the dual
lens camera is fully used in Instagram now and will do the smart transition
between 1x>2x optical and 2x+ digital zoom.

~~~
ramzyo
Oh no way! That's awesome, apologies for not knowing this and thanks!

~~~
snuxoll
They mentioned this in the post but it was fairly well hidden, can't blame you
for missing it.

------
cletus
Ok, so now that's done. How about the ability to zoom?

~~~
arnarbi
Update the app? I can zoom in Instagram, both iOS and Android. Apparently
since 18 weeks ago:
[https://www.instagram.com/p/BJxv5WthYas/?hl=en](https://www.instagram.com/p/BJxv5WthYas/?hl=en)

------
TheRealPomax
So... what is "wide color"? Are we talking
[https://en.wikipedia.org/wiki/Wide-
gamut_RGB_color_space](https://en.wikipedia.org/wiki/Wide-
gamut_RGB_color_space) or something else that has no documentation anywhere on
the internet?

Not trolling, I care an incredible amount about color spaces, and had expected
support for something like the UHDTV Rec.2020 color space with D65 (cool/blue
white), not an obscure Adobe standard with D50 (warm/yellow white). It's wider
than Rec.2020 though, so if this is what you're talking about: awesome, please
update your article so people can find out more about this color model and the
rest of the world can catch up!

~~~
cmelbye
It was in the fourth paragraph:

> The color space that Apple chose for its devices going forward is Display
> P3.

[https://en.wikipedia.org/wiki/DCI-P3](https://en.wikipedia.org/wiki/DCI-P3)

~~~
TheRealPomax
How extremely disappointing.

