Azzcat Blast

Design stories & tips, peppered with life's little tidbits

CONTACT

.png Designer Knockoff

September 28th, 2009

PNG files (Portable Network Graphics) are one of the image file formats used by web designers for modern browsers. See 10 Best Browsers in 2009. It’s a wonderful format, because it allows the designer to place an image w/o the “box” of JPG or the single color limitations of GIF. It’s classy, high end, the Jimmy Choo of image file formats.

However, PNGs come at a price, just like designer shoes.

That price is in high KBs.

In my latest website, Dovetail Custom Homes, I learned that my PNGs were way overpriced! The KBs were putting the site over budget on load time. I needed an affordable knockoff solution. Fast!

Follow below to see the solution.

Designer Brand:

background image
This background image (low res .jpg) with headline
slideshow image with fade to transparent edge
Plus 6 PNG masked edge images, part of javascript slideshow, saved for web as PNGs (~475 KB ea.)
composite
Equals a composite image gallery of 2.85 MB!

Knockoff Brand:

background image
This background image (low res .jpg)
composite
Plus 6 JPG masked edge images for js slideshow, saved for web as JPGs with background image visible (~45 KB ea.)
composite jpg
Equals a composite image gallery of only 270 KB!

End Result?

Speed & Economy.

Additionally, I was able to remove a IE-specific CSS style rule. (Seems IE couldn’t render the PNGs javascript slideshow with faded edges, anyway! Go figure.)

Plus…there’s more! By applying this image-saving technique to 3 additional slideshows, total site load time was reduced by over 70%. It’s not only faster, but also greener, because the site takes up less server time.
Thanks, Jason Grigsby!

BTW…I wouldn’t buy Jimmy Choos even if I could afford them–the heels would kill me!

Related Articles:

4 Responses to “.png Designer Knockoff”

decibel.places
September 28, 2009

Using JPGs is fine … unless – you need transparency (ie your images are not rectilinear). For transparency, you have a choice of PNG and GIF. GIF files are indexed at 256 colors and can be problematic with photographic images – they were created for graphic art. As you discovered, Internet Explorer does not handle PNG transparency well, requiring additional JavaScript for pngfix (and it gets complex when the images are rollovers). A tried and true technique to reduce image file sizes is to use the smallest palette possible without affecting the quality. SmushIt can reduce your file sizes by 35% without affecting quality – also part of the YSlow toolkit

catherine
September 28, 2009

Yes, totally. And that’s where I made my initial mistake–in thinking I needed PNGs to have transparent edges (the fade). By saving the fade edged images with their background, I was able to fake the fade and use considerably smaller JPGs. Of course, other images, like the logo and menu rollover colors are PNGs because they must retain transparency.

I really never use GIFs because by the time you need 256 colors, you’re talking complex image and you might as well move right on to PNG w/o image quality loss.

Thanks for the feedback, Randall!

decibel.places
September 28, 2009

Well, a GIF with an 8 or 16 color palatte will be smaller than a PNG or JPG – that is the situation for which GIFs were intended.

What Say You?