Transparent Image Compression

The Skinny

The newest recipe for designing ecom sites (here at Fluid) require transparency. There is nothing better than to let the product images breath and take them out of the boxy limitations of current web design. Imagine having your product with a tasteful glow around it laying on top of a gorgeous backdrop. That is the general design aesthetic that I’ve been working on that defines the fresh look for The North Face’s latest ecom redesign.

The Challenge

In order to create the effect, we have optimized the product images as PNGs. The problem is, that PNG files are significantly larger than comparable JPG files (5-10x greater) and cannot be compressed as JPG files can. Then you get to wondering what is more important for the user.

• A speedy delivery of product images VS an Extraordinary shopping experience

The products will be displayed via the Fluid Display app (flash based), which overlays the background image (html) based. How do we achieve true transparency at a bandwidth-friendly size without sacrificing image quality?

The Solution

• Is there a way to further compress a png? (256 colors are not enough to display the products in all their glory.)

The team at Fluid have been tinkering with a couple of ideas using Alpha Channels and Masks to make the transparency and glow happen. This requires extra steps and since we are facing launch, this solution would have to be implemented later - if the download of these images proves to be a problem.

But for now, I’m throwing this question out there:

• Is there a better way to achieve true transparency while maintaining performance?
• Is there another lossy file format that can make this happen?
• Is there a better way to compress a png?

Help save Cat from the engineers wrath.