GRAPHIC DESIGN   |   WEB DESIGN   |   DIGITAL ILLUSTRATION   |   GAME DESIGN             217-597-3263 ash@phoenixtreedesign.com

heart-png-8As a web and graphic designer there are times where transparency can be more than just a little problematic. Take, for instance, the home page design of the site you’re on right now. I LOVE WordPress, btw. I love its versatility and I love the ease at which you can problem solve due to its incredibly HUGE market share. Even though I am pretty fluent in html, css and few other languages, I admittedly head right on over to my favorite drag and drop theme builders to do most of my heavy lifting for me. I’m a designer by nature and trade and I Like to focus on my design more than the logistics of my code and its presentation. HOWEVER, there are times when adhering to a design can just end up being a huge endeavor. I often like to mix up background images from div-to-div. Unfortunately, that can prove to be challenging as getting an image to overlay against a repeating background image or texture will often result in irritating and obvious seems where the images meet.

So, you might be tempted to make some transparent images in order to overlay them against the repeating background seamlessly. Often though you will have drop shadow or irregular edges that will push you to use the PNG-24 format. PNG-24 is often a substitute for jpgs in that you can get some nice crisp images wile still retaining background transparency. The issue with PNG-24, especially in regards to web graphics, is that as soon as we start dealing with shadows and transparencies, file size starts to jump up HUGELY. For instance look at the web optimized file sizes between a matte background jpg and a PNG-24 image with a transparent background and light drop shadows.
jpg-png-file-size-comparison
So, with page loading times always being a priority, how do you simplify the image while still retaining a small size? Well, strangely, that is where PNG-8 comes into play. Unlike its bigger png8-dithering-examplebrother, PNG-8 is limited to 258 colors AND it handles drop shadows and gradients over transparent background differently. PNG-8 ultimately is unable to display nice clean anti-aliased shadows. In fact, it doesn’t even try to resort to banding to emulate the shadow, with its limited color spectrum, it instead relies on a process called dithering. Dithering interprets the transparency overlay as a series of dots trying to mimic the shape of the drop shadow. The job it does is usually less than desirable.

So where does this leave us as far as our options? Well, we can try to match up those matte backgrounds with a jpg and just hope for the best OR we can start to fully utilize the power of PNG-8. PNG-8 does allow us to finagle the drop shadow transparency by adding a matte color behind those areas that would regularly get dithered. I know that for many this just seems like a hasty workaround and you’re not getting TRUE transparency. For those of us who know the impact large images have on page loads, its a saving grace. My home page? Yup, you guessed it, all PNG-8 images for areas requiring transparency and drop shadows. All you have to do is choose a matte color that best represents the median color of your repeating bg texture.

Although the above screenshot does not do the process justice you can see that we are getting an even smaller file size than the dithering example. See for yourself, just take alook at me home page and see that PNG-8 has been there all along, ready to solve some of your web graphic transparency problems!