Issue

How do you serve images with a transparent background?

Solution

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: http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#Scene7_IS_and_IR_API_Home

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:

http://www.brainfuel.tv/how-to-use-transparent-png-files-on-your-web-site-and-still-load-fast

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.  

Šis darbas yra licencijuotas pagal licenciją „Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License“  „Twitter™“ ir „Facebook“ skelbimams „Creative Commons“ sąlygos netaikomos.

Teisiniai pranešimai   |   Privatumo internete politika