.gif){kind=spacer}
Transparency (graphic)
Encyclopedia
Transparency is possible in a number of graphics file formats. The term transparency is used in various ways by different people, but at its simplest there is "full transparency" i.e. something that is completely invisible. Of course, only part of a graphic should be fully transparent, or there would be nothing to see. More complex is "partial transparency" or "translucency" where the effect is achieved that a graphic is partially transparent in the same way as colored glass. Since ultimately a printed page or computer or television screen can only be one color at a point, partial transparency is always simulated at some level by mixing colors. There are many different ways to mix colors, so in some cases transparency is ambiguous.
In addition, transparency is often an "extra" for a graphics format, and some graphics programs will ignore the transparency.
Raster
file formats that support transparency include GIF, PNG, BMP and TIFF, through either a transparent color or an alpha channel.
Most vector
formats implicitly support transparency because they simply avoid putting any objects at a given point. This includes EPS
and WMF
. For
vector graphics this may not strictly be seen as transparency, but it requires
much of the same careful programming as transparency in raster formats.
More complex vector formats may allow transparency combinations between the elements within the graphic, as well as that above. This includes SVG
and PDF
.
A suitable raster graphics editor
shows transparency by a special pattern, e.g. a chessboard pattern.
One color entry in a single GIF or PNG image's palette can be defined as "transparent" rather than an actual color. This means that when the decoder encounters a pixel with this value, it is rendered in the background color of the part of the screen where the image is placed, also if this varies pixel-by-pixel as in the case of a background image
.
Applications include:
The transparent color should be chosen carefully, to avoid items that just happen to be the same color vanishing.
Even this limited form of transparency has patchy implementation, though most popular web browsers are capable of displaying transparent GIF images. This support often does not extend to printing, especially to printing devices (such as PostScript
) which do not include support for transparency in the device or driver. Outside the world of web browsers, support is fairly hit-or-miss for transparent GIF files.
The edges of characters and other images with transparent background should not have shades of gray
: these are normally used for intermediate colors between the color of the letter/image and that of the background, typically shades of gray being intermediate between a black letter and a white background. However, with for example a red background the intermediate colors would be dark red, and gray edge pixels give an ugly and unclear result. For a variable background color there are no suitable fixed intermediate colors.
PNG and TIFF also allows partial transparency, which solves the edge limitation problem. However, support is even more patchy. Internet Explorer
prior to version 7 does not support partial transparency in a PNG graphic. Very few applications correctly process TIFF files with alpha channels.
A major use of partial transparency, but not the only one, is to produce "soft edges" in graphics so that they blend into their background. See also monochrome or with shades of gray and anti-aliasing
.
The process of combining a partially transparent color with its background ("compositing") is often ill-defined and the results may not be exactly the same in all cases. For example, where color correction is in use, should the colors be composited before or after color correction?
. A clipping path is simply a shape or outline, that is used in conjunction with the other graphics. Everything inside the path is visible, and everything outside the path is invisible. The path is inherently vector, but can potentially be used to mask both vector and bitmap data. The main usage of clipping paths is in PostScript files.
In this example, two grayscale colors are to be composited. Grayscale values are considered to be numbers between 0.0 (white) and 1.0 (black). To emphasize: this is only one possible rule for transparency. If working with transparency, check the rules in use for your situation.
The color at a point, where color G1 and G2 are to be combined, is
.
Some consequences of this are:
( ( G1 + G2 ) /2 + G3 ) / 2 = G1 / 4 + G2 / 4 + G3 / 2
( G1 + ( G2 + G3 ) / 2 ) / 2 = G1 / 2 + G2 / 4 + G3 / 4
This is important as it means that when combining three or more objects with this rule for transparency, the final color depends very much on the order of doing the calculations.
Although the formula is simple, it may not be ideal. Human perception of brightness is not linear - we do not necessarily consider that a gray value of 0.5 is halfway between black and white. Such details may not matter when transparency is used only to soften edges, but in more complex designs this may be significant. Most people working seriously with transparency will need to see the results and may fiddle with the colors or (where possible) the algorithm to arrive at the results they need.
This formula can easily be generalized to RGB color or CMYK color by applying the formula to each channel separately. For example, final
. But it cannot be applied to all color models. For example Lab color
would produce results that were surprising.
An alternative model is that at every point in each element to be combined for transparency there is an associated color and opacity between 0 and 1. For each color channel, you might work with this model: if a channel with intensity
and opacity 
overlays a channel with intensity 
and opacity 
the result will be a channel with intensity equal to 
, and opacity 
. Each channel must be multiplied by corresponding alpha value before composition (so called premultiplied alpha). The SVG file specification uses this type of blending, and this is one of the models that can be used in PDF.
Alpha channels may be implemented in this way, where the alpha channel provides an opacity level to be applied equally to all other channels. To work with the above formula, the opacity needs to be scaled to the range 0 to 1, whatever its external representation (often 0 to 255 if using 8 bit samples such as "RGBA").
Adobe Acrobat
5.0 was the first to support PDF 1.4 and, hence, transparent PDF files. Transparency in PDF was carefully designed not to cause errors in PDF viewers that did not understand it, they would simply display all elements as fully opaque. This was a two-edged sword. On the one hand, it reduced errors and complaints about errors; on the other hand it meant people with older viewers, PDF printers, etc. might print something completely different from the original design, increasing complaints about incorrect output. When PDF files are used to prepare work for professional printing, transparency issues could cause millions of printed copies to be incorrect, and have to be destroyed.
language has limited support for full (not partial) transparency, depending on the PostScript level. Partial transparency is available with the pdfmark extension, available on many PostScript implementations.
In addition, few of the programs that generate EPS previews will generate transparency information in the preview.
Some programs have sought to get around this by treating all white in the preview as transparent, but this too is problematic in the cases where some whites are not transparent.
More recently, applications have been appearing that ignore the preview altogether; they therefore get information on which parts of the preview to paint by interpreting the PostScript.
In addition, transparency is often an "extra" for a graphics format, and some graphics programs will ignore the transparency.
Raster
Raster graphics
In computer graphics, a raster graphics image, or bitmap, is a data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium...
file formats that support transparency include GIF, PNG, BMP and TIFF, through either a transparent color or an alpha channel.
Most vector
Vector graphics
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon, which are all based on mathematical expressions, to represent images in computer graphics...
formats implicitly support transparency because they simply avoid putting any objects at a given point. This includes EPS
Encapsulated PostScript
Encapsulated PostScript, or EPS, is a DSC-conforming PostScript document with additional restrictions which is intended to be usable as a graphics file format...
and WMF
Windows Metafile
Windows Metafile is a graphics file format on Microsoft Windows systems, originally designed in the 1990s. Windows Metafiles are intended to be portable between applications and may contain both vector graphics and bitmap components....
. For
vector graphics this may not strictly be seen as transparency, but it requires
much of the same careful programming as transparency in raster formats.
More complex vector formats may allow transparency combinations between the elements within the graphic, as well as that above. This includes SVG
Scalable Vector Graphics
Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic . The SVG specification is an open standard that has been under development by the World Wide Web Consortium since 1999.SVG images and their...
and PDF
Portable Document Format
Portable Document Format is an open standard for document exchange. This file format, created by Adobe Systems in 1993, is used for representing documents in a manner independent of application software, hardware, and operating systems....
.
A suitable raster graphics editor
Raster graphics editor
A raster graphics editor is a computer program that allows users to paint and edit pictures interactively on the computer screen and save them in one of many popular “bitmap” or “raster” formats such as JPEG, PNG, GIF and TIFF....
shows transparency by a special pattern, e.g. a chessboard pattern.
Transparent pixels
Image
An image is an artifact, for example a two-dimensional picture, that has a similar appearance to some subject—usually a physical object or a person.-Characteristics:...
.
Applications include:
- an image that is not rectangular can be filled to the required rectangle using transparent surroundings; the image can even have holes (e.g. be ring-shaped)
- in a run of text, a special symbol for which an image is used because it is not available in the character set, can be given a transparent background, resulting in a matching background.
The transparent color should be chosen carefully, to avoid items that just happen to be the same color vanishing.
Even this limited form of transparency has patchy implementation, though most popular web browsers are capable of displaying transparent GIF images. This support often does not extend to printing, especially to printing devices (such as PostScript
PostScript
PostScript is a dynamically typed concatenative programming language created by John Warnock and Charles Geschke in 1982. It is best known for its use as a page description language in the electronic and desktop publishing areas. Adobe PostScript 3 is also the worldwide printing and imaging...
) which do not include support for transparency in the device or driver. Outside the world of web browsers, support is fairly hit-or-miss for transparent GIF files.
Edge limitations of transparent pixels
Grayscale
In photography and computing, a grayscale or greyscale digital image is an image in which the value of each pixel is a single sample, that is, it carries only intensity information...
: these are normally used for intermediate colors between the color of the letter/image and that of the background, typically shades of gray being intermediate between a black letter and a white background. However, with for example a red background the intermediate colors would be dark red, and gray edge pixels give an ugly and unclear result. For a variable background color there are no suitable fixed intermediate colors.
Partial transparency by alpha channels
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
prior to version 7 does not support partial transparency in a PNG graphic. Very few applications correctly process TIFF files with alpha channels.
A major use of partial transparency, but not the only one, is to produce "soft edges" in graphics so that they blend into their background. See also monochrome or with shades of gray and anti-aliasing
Anti-aliasing
In digital signal processing, spatial anti-aliasing is the technique of minimizing the distortion artifacts known as aliasing when representing a high-resolution image at a lower resolution...
.
The process of combining a partially transparent color with its background ("compositing") is often ill-defined and the results may not be exactly the same in all cases. For example, where color correction is in use, should the colors be composited before or after color correction?
Transparency by clipping path
An alternative approach to full transparency is to use a Clipping pathClipping path
A clipping path is a closed vector path, or shape, used to cut out a 2D image in image editing software. Anything inside the path will be included after the clipping path is applied; anything outside the path will be omitted from the output...
. A clipping path is simply a shape or outline, that is used in conjunction with the other graphics. Everything inside the path is visible, and everything outside the path is invisible. The path is inherently vector, but can potentially be used to mask both vector and bitmap data. The main usage of clipping paths is in PostScript files.
Compositing calculations
While some transparency specifications are vague, others may give mathematical details of how two colors are to be composited. This gives a fairly simple example of how compositing calculations can work, can produce the expected results, and can also produce surprises.In this example, two grayscale colors are to be composited. Grayscale values are considered to be numbers between 0.0 (white) and 1.0 (black). To emphasize: this is only one possible rule for transparency. If working with transparency, check the rules in use for your situation.
The color at a point, where color G1 and G2 are to be combined, is
.Some consequences of this are:
- Where the colors are equal, the result is the same color because
. - Where one color (G1) is white (0.0), the result is
. This will always be less than any nonzero value of G2, so the result is whiter than G2. (This is easily reversed for the case where G2 is white). - Where one color (G1) is black (1.0), the result is
. This will always be more than G2, so the result is more black than G2. - The formula is commutative since
. This means it does not matter which order two graphics are mixed i.e. which of the two is on the top and which is on the bottom. - The formula is not associative since
( ( G1 + G2 ) /2 + G3 ) / 2 = G1 / 4 + G2 / 4 + G3 / 2
( G1 + ( G2 + G3 ) / 2 ) / 2 = G1 / 2 + G2 / 4 + G3 / 4
This is important as it means that when combining three or more objects with this rule for transparency, the final color depends very much on the order of doing the calculations.
Although the formula is simple, it may not be ideal. Human perception of brightness is not linear - we do not necessarily consider that a gray value of 0.5 is halfway between black and white. Such details may not matter when transparency is used only to soften edges, but in more complex designs this may be significant. Most people working seriously with transparency will need to see the results and may fiddle with the colors or (where possible) the algorithm to arrive at the results they need.
This formula can easily be generalized to RGB color or CMYK color by applying the formula to each channel separately. For example, final
. But it cannot be applied to all color models. For example Lab colorLab color space
A Lab color space is a color-opponent space with dimension L for lightness and a and b for the color-opponent dimensions, based on nonlinearly compressed CIE XYZ color space coordinates....
would produce results that were surprising.
An alternative model is that at every point in each element to be combined for transparency there is an associated color and opacity between 0 and 1. For each color channel, you might work with this model: if a channel with intensity
and opacity overlays a channel with intensity and opacity the result will be a channel with intensity equal to , and opacity . Each channel must be multiplied by corresponding alpha value before composition (so called premultiplied alpha). The SVG file specification uses this type of blending, and this is one of the models that can be used in PDF.Alpha channels may be implemented in this way, where the alpha channel provides an opacity level to be applied equally to all other channels. To work with the above formula, the opacity needs to be scaled to the range 0 to 1, whatever its external representation (often 0 to 255 if using 8 bit samples such as "RGBA").
Transparency in PDF
Starting with version 1.4 of the PDF standard, transparency (including translucency) is supported. This is a very complex model, requiring over 100 pages to document. A key source of complication is that PDF files may contain objects with different color spaces, and blending these is tricky. PDF supports many different blend modes, not just the most common averaging method. In addition, the rules for compositing many overlapping objects allow choices, such as whether a group of objects are blended before being blended with the background, or whether each object in turn is blended into the background.Adobe Acrobat
Adobe Acrobat
Adobe Acrobat is a family of application software developed by Adobe Systems to view, create, manipulate, print and manage files in Portable Document Format . All members of the family, except Adobe Reader , are commercial software, while the latter is available as freeware and can be downloaded...
5.0 was the first to support PDF 1.4 and, hence, transparent PDF files. Transparency in PDF was carefully designed not to cause errors in PDF viewers that did not understand it, they would simply display all elements as fully opaque. This was a two-edged sword. On the one hand, it reduced errors and complaints about errors; on the other hand it meant people with older viewers, PDF printers, etc. might print something completely different from the original design, increasing complaints about incorrect output. When PDF files are used to prepare work for professional printing, transparency issues could cause millions of printed copies to be incorrect, and have to be destroyed.
Transparency in PostScript
The PostScriptPostScript
PostScript is a dynamically typed concatenative programming language created by John Warnock and Charles Geschke in 1982. It is best known for its use as a page description language in the electronic and desktop publishing areas. Adobe PostScript 3 is also the worldwide printing and imaging...
language has limited support for full (not partial) transparency, depending on the PostScript level. Partial transparency is available with the pdfmark extension, available on many PostScript implementations.
Level 1
Level 1 PostScript offers transparency via two methods:- A one-bit (monochrome) image can be treated as a mask. In this case the 1-bits can be painted any single color, while the 0-bits are not painted at all. This technique cannot be generalised to more than one color, or to vector shapes.
- Clipping paths can be defined. These restrict what part of all subsequent graphics can be seen. This can be used for any kind of graphic, however in level 1, the maximum number of nodes in a path was often limited to 1500, so complex paths (e.g. cutting around the hair in a photograph of a person's head) often failed.
Level 2
Level 2 PostScript adds no specific transparency features. However, by the use of patterns, arbitrary graphics can be painted through masks defined by any vector or text operations. This is, however, complex to implement. In addition, this too often reached implementation limits, and few if any application programs ever offered this technique.Level 3
Level 3 PostScript adds further transparency option for any raster image. A transparent color, or range of colors, can be applied; or a separate 1-bit mask can be used to provide an alpha channel.Encapsulated PostScript
EPS files contain PostScript, which may be level 1, 2 or 3 and make use of the features above. A more subtle issue arises with the previews for EPS files that are typically used to show the view of the EPS file on screen. There are viable techniques for setting transparency in the preview. For example, a TIFF preview might use a TIFF alpha channel. However, many applications do not use this transparency information and will therefore show the preview as a rectangle. A semi-proprietary technique pioneered in Photoshop and adopted by a number of pre-press applications is to store a clipping path in a standard location of the EPS, and use that for display.In addition, few of the programs that generate EPS previews will generate transparency information in the preview.
Some programs have sought to get around this by treating all white in the preview as transparent, but this too is problematic in the cases where some whites are not transparent.
More recently, applications have been appearing that ignore the preview altogether; they therefore get information on which parts of the preview to paint by interpreting the PostScript.
See also
- 3D computer graphics3D computer graphics3D computer graphics are graphics that use a three-dimensional representation of geometric data that is stored in the computer for the purposes of performing calculations and rendering 2D images...
- Transparent color in palettes
- Image masks
- Alpha channel
- Magic pink
- Video overlay
- GenlockGenlockGenlock is a common technique where the video output of one source, or a specific reference signal from a signal generator, is used to synchronize other television picture sources together. The aim in video and digital audio applications is to ensure the coincidence of signals in time at a...
- Bitblit