![[half-gray]](halfgray.png)
Compositing images using alpha channels cannot be performed directly on gamma-encoded images. The images need to be gamma-decoded before compositing. The result can then be re-gamma-encoded for display. The rest of this document will explain why.
Unfortunately it is commonplace for software (including web browsers and image manipulation tools) to perform compositing directly on gamma-encoded images, causing blended pixels to appear darker than they should.
The same issue arises for all operations that blend pixels, including scaling and filtering, but in the case of compositing it becomes an issue of interoperability. If you want your image scaled or filtered properly, you can do it yourself, but when you create a transparent image, it's because something else will supply the background, and you have to trust it to perform the compositing correctly.
An alpha channel is an attribute of an image that makes its pixels transparent in varying degrees, so that it can be composited against (overlaid in front of) an arbitrary background.
Gamma-encoding is an image representation in which pixel values are not proportional to light intensity; instead there is a non-linear relationship between pixel values and light intensity, which typically mimics the non-linear relationship between the voltage input of a CRT (a conventional computer monitor) and the intensity of the light it emits. When a CRT's input voltage doubles, the light emitted more than quadruples. Images are usually stored and transmitted in gamma-encoded form so that they can be dumped directly to a digital-to-analog converter connected directly to a CRT.
The default color space for the web is sRGB. It specifies a relationship between pixel values and light intensity designed to be compatible with CRTs. The sRGB standard (IEC 61966-2.1) is not freely available, but see its essential parameters and an early draft.
This document depends heavily on its images, so please check whether you are seeing them correctly. The following two squares should appear to be the same shade of gray (or quite nearly so). If they don't, and if your browser and operating system know how to display sRGB images, then the brightness & contrast settings on your monitor need adjustment.
The square on the left is made up of alternating horizontal black and white stripes, so it will cause your monitor to emit half as much light as a solid white square would. The square on the right is a solid gray sRGB image with a pixel value that should likewise cause your monitor to emit half as much light as a white square would.
[There is a reason the square on the left uses horizontal stripes rather than vertical stripes or a stipple. CRTs scan horizontally, therefore vertical stripes (or a stipple) would cause the video signal to contain a very high frequency (in the MHz range), whereas horizontal stripes cause a much lower frequency (in the kHz range). High frequencies are more challenging for the electronics and therefore more likely to be attenuated. Among the squares below, you might find that the one with vertical stripes (center) and the one with a stipple (right) are darker than the one with horizontal stripes (left).]
![[vertical stripes]](v-stripes.png)
![[stipple]](stipple.png)
|