NOTE: To clearly understand the topics covered on this page, you must have a good knowledge of the .PNG file format.  You can find all the information about .PNG file format on the official Website (www.libpng.org).  Having some knowledge about how a stereoscopic image works is also a good start.

It is the presence of the sTER chunk that indicates that the image is stereoscopic.  The data portion of the stereoscopic sTER chunk consists of an unsigned 8 bits integer that contains the stereoscopic image type.  Up to now, since no type value has been yet defined, the stereoscopic image type value must always be initialized to 0.  However, numbers greater than 127 (128 to 255) are allowed for inventing experimental or private definitions of values.  (Note that use of private type codes may render a file unreadable by standard decoders.  Such codes are strongly discouraged except for experimental purposes, and should not appear in publicly available software or files.)  It is more the way that the left and right images are stored than the chunk itself that makes the .PNG image a stereoscopic image.

The rules are very easy.  The .PNG image is composed of two images.  One for the right eye and one for the left eye.  Right and left images must have the same size.  Samples of right and left images are co-sited.  The two images are stored side by side horizontally with sometimes some padding pixels between them.  Right image come first (right image is at left of left image).  The horizontal start position of left image must always begin on a multiple of 8 pixels (in order to sync the Progressive Display of the two images).  You must use the pHYs chunk to indicate the pixels size ratio when it is not 1:1.

An example will help understanding the way a stereoscopic image of 77x53 pixels is saved like a normal image of 157x53 pixels.

  - Right and left images are 77x53 pixels.
  - Rectangle (  0,0)->( 76,52) inclusively contains the right image.
  - Rectangle (77,0)->( 79,52) inclusively contains the padding pixels.
  - Rectangle (80,0)->(156,52) inclusively contains the left image.
  - So the total size of the saved .PNG image is 157x53 pixels.

IMPORTANT: Even if the padding pixels are never displayed, their values must always be valid because an application, not supporting the sTER chunk, will display the complete image with the padding pixels.  (The only dangerous case is the color palette case with less entries in the palette than the bit depth can produces.)  In the example above, we are using grayscale padding pixels only to make the padding region more obvious to see.

The reason to put right image at left and left image at right is simply because the Cross-Eyed Display Technique is more flexible than the Parallel Eyes Display Technique.  The Parallel Eyes Display Technique limits the distance (so the size of images) between right and left center of images on screen to be less than the distance between your eyes.  By example, the Parallel Eyes Display Technique used on a Web page can work well on a 17" monitor but not on a 19" monitor (unless you can move your eye globes in opposite direction without been injured!).  The Cross-Eyed Display Technique does not have this limitation and works 100% of the time.

Applications, those do not yet support the sTER chunk, will simply display an image composed of a right image followed by a left image with sometimes some padding pixels between them.  In such applications, you will still be able to view the stereoscopic image by using the Cross-Eyed Viewing technique, since the storing format of the right/left images follows the rules of the Cross-Eyed Display Technique.

	Cross-Eyed Viewing Instructions : 1- To see the stereoscopic image you have to look at it in a special way. Sit at a relaxed distance from your monitor and focus on the two images. 2- Now slowly go cross-eyed and you will see the two images separate (and most likely blur) and slowly form a third image in the middle of the two pictured images. 3- This image (more than likely very blurry at the moment) is the stereoscopic image you want to focus on. 4- Now, try and relax your vision and focus on the new third image in the middle. 5- After some time and practice you will see the stereoscopic image with all its depth! Don't be put off if you can't see this image straight away, it can take a little practice. The closer you are to your monitor the HARDER it is to see the stereoscopic image; if you are finding it difficult move away a little bit.

ENCODER EXAMPLE :
We take right and left images from an ALIEN Video Camera.  The sizes of each mono images are 77x53 pixels.  The height of an ALIEN pixel is around 20% taller than its width so a ratio of 12:10 (HzPix : VtPix) will be used.  We call the png_get_sTER_total_and_padding_width() function to calculate the composed image width.  We merge right and left images into the composed image of 157x53 pixels (157 = 77+3+77; 3 = padding pixels width).  We set the pHYs chunk to {12, 10, 0} (0 because the pixel physical size is unknown in this example).  We save the composed image with the sTER and pHYs chunks.  That's all.

DECODER EXAMPLE :
In this example we will read the Stereo PNG file created in the above example.  A typical web browser decoder gets a size of 157x53 pixels from the PNG header.  It finds a sTER chunk so it calls the png_get_sTER_real_and_padding_width() function to calculate the stereo image width, so a stereo image size of 77x53 pixels is expected.  It finds the pHYs chunk with a ratio of 12:10, so it reserves a rectangle area of 77x64 pixels (64 = 12/10*53) on the displayed webpage to draw the stereo image (assuming screen pixels are square).  The progressive reading is going on (if the stereo image was saved with the Adam7 feature) and at some interval of time, the stereo displaying engine extracts the right and left images from the partially loaded 157x53 pixels composed image, it creates the resulting stereo image by merging the right and left images together using the current browser stereo displaying method, that has been specified by the user preferences, and finally it stretches the resulting stereo image to fill the reserved rectangle area of 77x64 pixels on the webpage.  The final result is a well proportioned stereo image identical to the one taken from the ALIEN Video Camera.  Of course if the HTML code specifies directly the stereo image size, the stereo displaying engine will use that size to reserved the rectangle area on the webpage.  If a size is specified, it is because the HTML author is knowing what he does.

As you can see, adding support to Stereoscopic .PNG Image File Format is a piece of cake if your application already support .PNG Image File Format.