How do you serve images with a transparent background?


Alpha channels embedded in an image are automatically maintained in Scene7 Publishing System (SPS). (No image flattening or anything akin to that is done during optimization.)

Make sure that the source image you upload has a transparent background. It is not enough to mask out the image; the server doesn't know to drop the background. The best practice is to create a layered image with a transparent background and upload that.

Then, call the image off the Image Server using a format that supports alpha transparency. You can call the image by appending "&fmt=png-alpha." For a list of the other alpha enabled formats, see the Image Serving documentation:

Alternatively, if you're using an image preset defined in SPS, then check the format to ensure that an alpha-supported format is selected for the output format.

Internet Explorer 6 does not natively support alpha transparency for PNG images, and instead displays a blue opaque background.

Internet Explorer 7 and later, and Firefox do support PNG alpha transparency.

Most browsers do not provide native support for TIFF-Alpha images. As such, the images only load if an appropriate player plug-in is available on the end-user's computer (such as the QuickTime Player). Therefore Tiff-alpha is not recommended.

Also, consider using this Flash transparency solution:

Finally, you can use GIF. However, GIF has limited functionality since it does not support full 8-bit transparency. It supports a single color table entry, which corresponds to transparent. That, along with the limit of 256 colors, means that along the transparent edges things look poor. For these reasons, people rarely used either PNG or GIF, and instead composited the image over the same color as the background of their web page.  

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea