When I export a PNG from Krita and upload to a website, it comes out too dark


I made a picture in Krita to use as an avatar with Twitch and Steam. I exported to a PNG and uploaded it, but it looks far too dark on the website. I tried both options of the "force sRGB" checkbox in the export dialog, with no change. If I look at my PNG with another image viewer, it looks correct. The thumbnail in Windows Explorer looks correct. Even if I look at the PNG with my web browser (Firefox, the same thing I'm using with those websites), it looks correct there.

Clearly Twitch and Steam are doing something to the PNG to make the colours dark, but what? Is there something I can change in Krita to stop the colours getting mangled?

4/21/2016 7:42:00 AM

Accepted Answer

This is because those websites are processing the PNG using simplistic tools that don't understand embedded colour profiles, while Krita is using a colour profile that's not standard for PNG files. In this case, Krita was using a linear profile (an sRGB profile ending in -g10), but the PNG was being read as if it had the standard sRGB gamma curve. Using a linear profile is best for editing the image, but the output image should have the standard sRGB profile, both for best compatibility and to reduce banding. Here's an export workflow for this kind of situation, for Krita 2.9.11. (Later versions might have different labels or menus, or might even do it for you automatically.)

  1. When you create the image, give it a linear colour space to work in, such as sRGB-elle-v4-g10. The "-g10" is short for "gamma 1.0", and makes the colours linear. Since 8-bit linear images have banding, make sure to use 16-bit or one of the float options.

  2. Before exporting the image, use File → Create copy from current image. This isn't necessary (it won't change the output), but it's safer. You won't accidentally save the .kra file with the wrong colour space.

  3. If you're resizing the image (because you've been working with a larger canvas), do it now.

  4. Image → Convert image colour space. Model: RGB. Depth: 8 Bits. Profile: sRGB-elle-V2-srgbtrc. This gives it the standard sRGB colour curve. For Rendering Intent, choose either Perceptual or Relative colorimetric. If you've been working in an sRGB space already (i.e. if you followed step 1) it should make no difference which. If you've been working in a wider colour space, relative colorimetric will clip the brightest colours but make most colours look the same as before, while perceptual will preserve the relationships between all the colours, possibly making them all slightly duller.

  5. Now export the PNG. Uncheck Embed sRGB profile to make the PNG smaller. If the website isn't going to read the profile anyway, there's no point wasting bytes on it.

4/21/2016 7:42:00 AM