Search code examples
iosxcodeuiimageviewcolor-spaceasset-catalog

Xcode 9 renders P3 PDF assets into SRGB

I've spent hours in trying to figure this one out.

Goal

Display P3 PDF Asset in UIImageView (the PDF is 100% in P3 Color Space).

Issue

I'm creating a P3 PDF asset and adding into the Xcode. Within the Asset Catalog, the asset appears in the correct P3 color. When using the asset inside UIImageView and running on iPhone X ( physical device, supports P3 Color Space ), the asset showing is SRGB instead of P3.

Does anyone has information on how to resolve this issue?
Any help will be highly appreciated.
Roi

Solution

  • Use PNG directly

    You mention you suspect there is a PNG inside the PDF. I would recommend to use PNG directly without a wrapping PDF.

    PDFs are rendered by Apple to PNG when they are deployed on a device. This rendering may apply a specific color profile (PDF and color management is a broad topic).

    Also the rendering itself might not produce the results you are expecting, see e.g. https://bjango.com/articles/idontusepdfs/

    16 bits per pixel (per channel)

    Apple's Human Interface Guidelines state one has to use 16 bits per pixel and export images in .png format.

    When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in .png format.

    see here: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#color-management

    Finally, I'd like to mention just two more settings that you are probably already using:

    Compression

    In the attributes inspector for image assets you should choose 'Lossless'.

    Gamut

    Swicht Gamut to 'sRGB and Display P3' and then make sure your image is in a 'Display P3' slot in the .xcasset file.

    Test with PNG export of Sketch

    Taking a look at the chromaticity diagram, one can see that the P3 color space has a larger gamut for greenish colors.

    Since I am not sure whether I can recognize the difference between the two color spaces, I have made the following experiment:

    • inserted a artboard in Sketch
    • created a green rectangle with the color #00FF00
    • assigned under <File/Change Color Profile> the Display P3 color profile
    • selected the rectangle and clicked Exported selected
    • have chosen .png without interlacing

    Then I did the very same but with sRGB ICE61966-2.1 profile.

    I checked both .pngs in the ColorSync utility (can be found under /Applications/Utilities). Pressing the image info toolbar button one can see, that the correct ColorSync profiles are assigned.

    In Affinity Photo I checked under <Document/Colour Format> the number of bits per channel. It was for both .pngs 8bit per channel, so I created two additional .pngs with 16bits per channel and named it accordingly.

    Then I added the 4 .pngs to a .xcassets folder with the following settings:

    • Compression: 'Lossless'
    • Scale: 'Single Scale'
    • Gamut: 'sRGB and Display P3'
    • assigned the .pngs accordingly to the correct slot (either sRGP or Display P3).

    Then I deployed to iPhone X.

    Result: Actually I can see a difference between the green rectangles. The 'Display P3' do have indeed a more saturated green.

    I exported the same thing to an old iPhone, where I can't spot any differences between the sRGB and Display P3 images.

    I found it interesting that the 8-bit variant directly from Sketch also works, so 16 bits per channel doesn't seem to be a hard requirement.