Photos and Color Profiles: The Quickly Approaching Move to Wide-Gamut

My name is Kelly Thompson, and I’m a VP at 500px. Buried in Tuesday’s announcement of Google’s Android Oreo was an interesting tidbit for photographers: like Apple the year before, Google’s mobile OS has been reworked to support deep and wide color, and, for the first time, full color management for Android devices.

What does this mean for photographers and their workflows? It’s probably a good time to review your processes to make sure you’re getting the best possible results for the widest audience. At 500px, we’ve made some significant changes to better support the amazing new screens, while also trying to cut down on file sizes.

20+ Years of sRGB

Do you remember what monitors looked like 20 years ago? It wasn’t pretty. In 1996, Microsoft and HP developed the sRGB standard. It has served its purpose well, but it’s definitely showing its age.

When it comes to sRGB on 500px, we’ve always done two things. To be the most widely compatible and the most space efficient we have:

1. Converted non-sRGB images to sRGB
2. Stripped the sRGB profile from the image

The first step allowed us to be compatible with the broadest set of users. Until recently, most screens were sRGB calibrated or weren’t calibrated at all (which usually meant they were close enough to sRGB). This meant anyone with wide-gamut displays wouldn’t get to see the images uploaded in wide-gamut profiles (Adobe RGB, ProPhoto RGB, P3). Unfortunate, but it meant most people saw a fairly accurate representation of the intended look.

The second step often confuses people, but if you think about it from the point of view of a site delivering billions of image views, it starts to make a lot of sense. The standard sRGB color profile is over 3KB in size. Multiply that out and it’s a lot of wasted data when browsers assume that an untagged image is sRGB (at least they should! More on this later). Stripping the color profiles from the images saves 25-30% in data transferred. On a small 5KB thumbnail, it effectively cuts the file size in half.

As mentioned above, the W3C consortium states untagged images should be treated as sRGB. Google Chrome does NOT do this if you have a wide-gamut display. Instead, it renders untagged images in the profile of the display rather than sRGB. Photographers with calibrated displays (many, many of them!) end up seeing noticeably wrong-looking images.

The color bars below demonstrate the Chrome issue. The top bar is an sRGB file. The bottom is the same file, untagged. They should look exactly the same. They won’t if you’re on Chrome with a wide-gamut display.

Other companies had faced similar issues. Facebook took an interesting approach – they optimized the sRGB profile down to just 524 bytes and renamed it ‘TINYsRGB’. It produces results that are indistinguishable from the original profile, so we rolled the TINYsRGB profile out broadly to the community. It kept files sizes down and fixed the Chrome issue.

The Windy Road to Wide-Gamut

With that issue solved, we moved on to delivering full wide-gamut across the board. Photographers have long been shooting in wide-gamut (notably Adobe RGB) and RAW formats, but most were converting to sRGB before uploading. When iPhones with Display-P3 cameras and screens arrived, we saw a large uptick in the number of images being delivered in wide-gamut format. The phones plus the new P3 displays on the iMac & MacBook Pros meant that many pros had a wide-gamut workflow available for the first time. Other companies have followed suit and delivered great wide-gamut displays of their own (i.e. the Microsoft Studio and the beautiful new Dell displays for example). It was time for the switch.

Most photographers think that when they upload a file on 500px, the same image gets delivered back out when requested. That isn’t the case. Our image resizer generates the required file based on screen resolution, required image size, quality level, watermark requirements, etc.

In order to support wide color, we updated our rendering pipeline to stop converting images to sRGB and deliver the wide-gamut versions when available. People with wide-gamut displays finally started seeing those images at their best.

An image of pencil crayons in the Adobe RGB color profile by José de Jesús Cervantes Gallegos shows the full color range.
This image displays the colors that sRGB CAN represent as grayscale, while keeping the Adobe RGB-only spectrum as color. The vibrant blues, rich teals and brilliant oranges are not visible in sRGB.

Except if you were using an Android phone. Android versions before Oreo didn’t support color management at all. This was a spectacular shame since the screens are exceptional – wide-gamut, highly accurate, with massive dynamic range thanks to their OLED technology. What did this mean? The phones served up clownishly oversaturated colors in photos with color profiles other than sRGB.

Owners of Android phones that can upgrade to Oreo are going to be in for a pleasant surprise. These are going to be some of the best-looking screens to view images on – ever. It does, however, create a bit of a conundrum – there are almost no OLED laptop screens yet. The screen in your pocket will handily beat your desktop or laptop one. The displays we process our images on really need to catch up.

Here we see a vibrant Display P3 profiled image. Image by Kaanchana Kerr.
In this image, we see the same image with colors outside of the sRGB spectrum kept as color and those viewable in sRGB dropped to grayscale.

Seeing Wide-Gamut Images on 500px

If you’ve got a wide-gamut display and would like to see some images in action, we have just the thing. We’ve added a filter to 500px’s web search that allows you to narrow your results to three different wide-gamut options. It’s a great way to see what your fellow photographers are up to.

WebP vs JPEG Compression

Years ago after the WebP format came out, we investigated using it on the site. It didn’t make much sense for us then due to the way our backend system worked with caching and the lack of support for the format. It’s also heavily optimized for highly compressed images – something we don’t really serve at 500px (on the JPEG quality level, we’re in the 80 to 85% range). The changes we’ve made to our rendering system over the years (and recent changes to prep for more modern file formats), as well as the extreme popularity of Chrome as a browser, made us take another look at the format.

Here’s a JPEG photo by Artur Borzęcki.
This WebP image looks better (especially around edge detail and subtle background gradients) and is 14% smaller.

The WebP image on the right looks better (especially around edge detail and subtle background gradients) and is 14% smaller. Image by Artur Borzęcki.

It took us many rounds of testing to get WebP images we were happy with. The algorithm excels at edge detail where JPEG utterly falls down but tended to smear out details in subtly textured areas of an image. Because we compress thumbnails at a higher rate than the full images, we had better luck with them. There are also lots of edge cases. Sometimes images looked significantly better (especially grainy images) but were actually larger than their JPEG equivalent.

Overall, we’re very happy with where we’ve landed – about a 25% overall reduction in file size for browsers that support the format (Chrome, basically). We’ve also rolled it out to our latest Android app.

What it Means for You, the Photographer

If you’ve been shooting RAW all these years and have kept your original files, you’re in luck. They contain loads of extra data that outputting them as sRGB JPEGs would have lost. But you can go back and reprocess the RAW files, exporting to any wide-gamut space you like.

Just keep in mind it’s heavily recommended you have a wide-gamut monitor to see what you’re actually doing to the file. This is going to be even more exciting when we get distributable formats that support more than 8-bits per channel. It’s especially important for wide-gamut images, as the wider gamut means you’re stretching those 8 bits across a wider area, resulting in the dreaded banding. Remember to process these types of images in 16-bits-per-channel color depth (or higher) in Photoshop or your favorite image software to keep them at the highest possible quality before exporting.

If you’re uploading to 500px, we’re keen to accept your wide-gamut files. If you’ve been uploading images from our app on an iPhone 7 or 7 Plus, you’ve already been submitting Display P3 profiled images. For the best-looking files, make sure you’re delivering us images bigger than 2048 pixels per side. We create up to 20 different file sizes from your original, so a large image reduced in size can hide a multitude of sins affecting the original. The more we have to work with the better!

On the Marketplace side of 500px, we have always sold the files in the color space they were delivered in, so that won’t change. Previewing them on the site will give you the full gamut experience as well.

It’s been an exciting few years for color, technology, cameras, and photography. As things continue to progress, 500px will continue to try and deliver the best-looking images possible with the latest tech at our disposal. We look forward to seeing what you produce!

About the author: Kelly Thompson is the VP of Strategy, R&D, Community Management at 500px.