Image transparency – Color-keying and Alpha-blending

Earlier versions of OpenInsight have supported basic image transparency via a method called “color-keying”, where a specific color in the image is nominated as the transparent color (by default the color of the top-left pixel).  When the image is drawn to screen the pixels that match the transparent color are not rendered so the background pixels show through instead.  Whilst this can be effective in simple cases it is sub-optimal for images that have smooth curves and shadows as these tend to appear very pixelated: You can see this in the example from OpenInsight 9.3 below, where a bitmap with a white background and a slight shadow is rendered to a non-white background:

Orignal bitmap

Color-Keyed bitmap showing pixelated edges

Color-Keyed bitmap showing pixelated edges

A much better alternative is to use an image format that supports an “alpha channel” such as a PNG file*. Basically this means that each pixel in the image has an extra byte that describes it’s transparency – a value of 0 means that the pixel is totally transparent, while a value of 255 means that the pixel is totally opaque, Values in between are used to calculate how the image pixel is combined with the background pixel when drawn, so that it gives the appearance of being translucent, allowing the background pixel to show through to some degree.  This is a technique known as Alpha-blending.

With version 10 we’ve taken the opportunity to re-visit OpenInsight’s image handling so it respects the alpha channel properly – you can see this in the example below, where the same image is loaded from a PNG file rather than a standard BMP file:

Alpha-blended source bitmap

Alpha-blended PNG bitmap with smooth edges and shadow

Alpha-blended PNG bitmap with smooth edges and shadow

We have also take this one step further and provided the ability to specify a transparency setting for the entire image when it is rendered, so you can create an effect like a watermark:

Alpha-blended translucent image on a gradient background

Alpha-blended translucent image on a gradient background

Note that this effect also applies to color-keyed and non-transparent bitmaps too, which of course are still fully supported so you won’t need to change your existing applications unless you want to. In the next post we’ll take a look at some of the new image-specific properties that support this functionality.

* (PNG image files have always been supported in OpenInsight but the alpha-channel has never been respected, thereby limiting them to basic color-keying for transparency effects).

(Disclaimer: This article is based on preliminary information and may be subject to change in the final release version of OpenInsight 10).

5 thoughts on “Image transparency – Color-keying and Alpha-blending

  1. Pingback: OpenInsight’s image handling is about to go to a new level. « Martyn's RevSoft UK Blog

  2. Pingback: The Image API | Building OpenInsight 10

  3. Pingback: The Future Is Now – Improved Transparency Support | SRP Update (Blog)

  4. Pingback: The Future Is Now – Advanced Support for Images | SRP Update (Blog)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s