Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Reduce size of png files

and maintain quaity of images



1:22 am on Feb 3, 2009 (gmt 0)

5+ Year Member

I am really trying to use a png file for the site <snip> as the dresser in the background, but the only way I can keep the page size down is to use a gif and I get jagged edges. Any suggestions?

No URI's/Specifics please, see TOS [webmasterworld.com]

[edited by: limbo at 1:30 am (utc) on Feb. 3, 2009]


9:47 am on Feb 3, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi Blossom

Welcome to WebmasterWorld [webmasterworld.com] :)

This old chestnut eh? You've hit on a problem that's been troubling web designers for many years.

Firstly you have Internet Explorer's (IE) deficiencies to support, then you have large gap in file size between PNG's with alpha transparency and GIF's with index transparency.

Here's the deal with IE(6)—it doesn't naively support alpha transparency—so you can use either index transparencies for your PNG/GIF—which allows either totally opaque, or fully transparent parts of an image... or... you can use a PNG with alpha transparency allowing translucent aliasing (seamless integration with its background). However this route will need the IE6 PNG Transparency Filter hack to ensure IE6 users do not get horrible black blobbing.

Regarding image size - how big is your PNG? Generally speaking, as you've recognised, you need to keep your file sizes as low as possible, but broadband take-up world wide is affording us a little more freedom... Check your logs, are many of your users on dial-up?

Would it be possible to use an index transparency GIF that's been created with the background it is sitting on in mind. So the dreaded jaggies are hidden? In other words - mimic aliasing so to the naked eye it looks like it's seamless.


1:52 am on Feb 4, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I presume limbo meant to suggest using an index PNG, which is often smaller than GIF.

As for the jaggies, are you exporting with a matte? In other words, if your background color is green, export the image with the matte set to green. Otherwise, your software may be exporting under the assumption the image will be placed against a white or black background, which will make the edges much more pronounced.


Featured Threads

Hot Threads This Week

Hot Threads This Month