Images and CSS Sprites

Image Formats

Animations

Animations are implemented using the GIF 89a format. (For example, loading.gif)

Photographs

Images that are photographic in nature or are placeholders for images of a photographic nature use the JPEG format.

Sprited Images

Sprited images are available in PNG 32 format (24-bit color + alpha transparency) and PNG 8 format (256 colors + alpha transparency). Even though the PNG 32 format is provided, it is not used because IE 6 does not support it without use of the Alpha Image Loader filter. Only the PNG 8 format is used.

All Other Images

All other images use the PNG 24 format (24-bit color without transparency) or PNG 8 format (256 colors or less with or without single color transparency or alpha transparency). All images in these formats are tested and work with IE 6. (See note below regarding PNG 8 alpha transparency on IE 6.)

Use of PNG Formats

PNG 32

This format contains 24-bit color images with alpha transparency (multiple values of partial transparency). This format is not used in images referenced by the CSS. Sprited images are provided in this format (as well as PNG 8 format). However, the PNG 32 format images are not used because this format is not properly supported by IE 6.

PNG 24

This format contains 24-bit color images with no transparency. Some images may use this format because it is properly supported in IE 6. However, PNG 8 format is usually used due to smaller file sizes.

PNG 8

This format contains 256 colors or less and may or may not contain a single color of transparency or alpha transparency (multiple values of partial transparency). Most images use this format because of its small file sizes and improved user experience due to support for alpha transparency.

There is a bug in IE 6 where partially transparent pixels in PNG 8 images display as fully transparent. So, PNG 8 images with alpha transparency do not display the same in IE 6 as all other browsers. They will appear to have "jagged edges". Any images using PNG 8 with alpha transparency have been hand altered and tested in IE 6 to ensure that the image displays in an acceptable way even though it is not identical to "modern" browsers. (Usually, these images look just like a comparable GIF format image on IE 6.)

Image File Size Optimization

All PNG images are "crushed" to reduce byte size as much as possible. Color correction information and text inserted to identify the authoring program is removed. We remove the following PNG "chunks" from our images: gAMA, cHRM, iCCP, sRGB, tEXt, iTXt.

CSS Sprites

The CSS uses sprited graphics to reduce the number of HTTP requests and improve performance. In version 2.0.0 and 2.0.1, the "lotusSpritesOn" class on the body tag enabled sprites. Beginning with version 2.0.2, sprites are always on and the "lotusSpritesOn" class is deprecated.

Some example markup uses the sprite named "yourProductSprite". This is an example sprite representing an individual product-specific sprite. Each product is creates their own product-specific sprite. When comparing example markup with actual markup in a product, you need to change "yourProductSprite" to whatever name your product uses for their product-specific sprite.