Wednesday, January 11, 2017

Bringing Wide Color to Instagram

Mike Krieger (via Craig Hockenberry):

In other places — like when initializing a CGContext for other drawing operations — it’s common to use CGColorSpaceCreateDeviceRGB when creating a CGColorSpaceRef. This will create an sRGB colorspace on most devices, and we’ll lose our wide color information. Most of the initial work for wide color on Instagram was tracking down everywhere that this color space was hard-coded.

Instead, we can see if our screen supports wide colors (using UIScreen.mainScreen.traitCollection.displayGamut), and if so, use CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3). Again, we found that creating a wrapper that returns the appropriate colorspace for that device was helpful.


Instagram uses OpenGL for most of its image editing and filtering. OpenGL isn’t color managed; it operates on a range (say, 0.0 to 1.0), and it’s up to the output surface to determine what colors that actually maps to.

The good news is that this meant we had to make very few changes to make our GL pipeline wide-color compatible. The biggest change was to ensure that when we extracted pixel buffers from our GL surface, we were using the appropriate colorspace before converting from a CVPixelBufferRef to a CGImageRef.

I can see the Instagram logo in their canary image even though my Mac doesn’t have a P3 display.

7 Comments RSS · Twitter

That's decided odd. I'm not seeing it on my old MacBook Pro in Preview.

I'm also not seeing it in Finder previews on my new MacBook Pro even though it renders fine in Preview, QuickLook, etc. Seems like there are a few paths in the system that still need to be updated.

@Eric I see the logo on my main display (external Dell, non-Retina, connected via Thunderbolt) in Safari, Finder, Preview, even Firefox. However, if I drag the window to my secondary display (internal 2012 MacBook Pro, Retina), I just see a red square.

Are you saving their image from DropBox and looking at it in Photos? The on iOS is doing some funky stuff, so you need to save it.

@Nano I’m downloading it with Safari for Mac.

What color profile have you chosen for your display? On my 2010 Macbook Pro, if I use the Color LCD profile, I see a red square. If I use the Display P3 profile, I see the Instagram logo.

@Jon I’m using f.lux, so I think it’s always the changing “f.lux profile”. The normal profile is “DELL U3014”, which does show the logo. “Color LCD” does not.

I notice that some other non-P3 old profiles I have lingering on my Mac also show the logo on my Macbook Pro.

A better test would be an image which includes P3 colors of multiple hues.

Leave a Comment