How to get your PNG images really tiny!

http://www.vimas.com/ve_guru.htm

I found this program this weekend while trying to find a way to get a lot of fairly large 3D rendered sprites with a lot of frames to be a lot smaller.

This program can act as a photoshop plugin, and can do certain things you can't easily do in photoshop that really crush the size of PNG's.

Firstly, it can reduce the number of colors in a 24bit PNG before saving it, while optionally dithering the image so you can really reduce the colors and still get a decent looking image.

Secondly it can do something I was sure was impossible but which I'd wished I could do for a while. It can save 8bit indexed color PNG's with alpha information for each color! This allows you to keep your antialiased edges, and gain huge file size savings. Photshop cannot load indexed images with alpha without making the image look masked, but BlitzMax CAN.

Using this program I was able to take two 1024x1024 24bit images with 16 256x256 frames that had antialiased edges, each weighing in at 391K and 529K respectively, and using the default PNG8 with Alpha setting in Web Image Guru, I was able to get very nice looking sprites with smooth shading where you can barely see the dithering in stills and not at all when it is in motion in the game, which were only 100K and 152K respectively.

That's 4x smaller folks, and with no noticable degradation in quality in the game!

I'm sure for still images with no alpha JPEG will still be king, but for your animated sprites with alpha that you had to use 24bit PNG's for, this program is great.

I think Web Image Guru has a 15 day trial period, but that is what another website said. I don't see anyhting on their own website which says what limitations are in the demo.

Good timing!
I didn't know PNG compression could be so much better.

This new knowledge, combined with the IE transparent PNG fix, may save me from the horrible grainy Gifs currently being used on my web site.

Internet Explorer has been fixed to view transparent png files correctly now????

-Garrett

No, it's a javascript hack.
I have it posted somewhere here...
Works pretty well, though :)

Ah man, don't get my hopes up like that. ;-)

-Garrett

There's also a free plug-in for photoshop called superPNG which vastly improves the PNG algorithms used by native photoshop...

At least for Photoshop 7, CS2 uses a different algorithm of its own that's about equally efficient.

@sswift: before I download it and check it out, are you able if it is able to "Auto-compress" by checking out the number of colours you've used in a 32 bit png (with 8 bit alpha) and say, hmm, well this can be turned into an 8 or 16bit png (without colour loss), and yet still retain the 8bit alpha channel? Thanks in advance for any answer. I asked this because the graphics in my latest game are consuming a lot of disk space (and thus affect download size)...

Nice find, sswift. The dither algorithmn is excellent - it managed to alter one of my (admitedly all-green) game images from 24-bit color to just 4 colours without hardly any change in appearance.

grey:
I don't know what you mean, but you can use it to make a 24bit png with fewer colors and an alpha channel, which one presumes is also reduced to some degreee, or an 8bit png which has 256 colors where each color has an alpha component, most of which will end up being your normal 255 alpha, but some of which will contain lower alphas.

Here's another tip:
You'll find that if you convery your images to the 8bit palette that trying to use that defringe plugin on them will make them big again. If you're gonna do that you might as well save as 24bit in web image guru.

But if you need your image to be 8bit and get rid of white fringes, then click the second tab in PNG8 mode, where you will see a "background" option. Use Origin unfortunately does not seem to do anyhting or do what defringe does, but you can set the background to any color you want and that will be what the 0 alpha pixels will use. So with this you'll be able to significantly reduce or completely hide fringing effects, though for difficult images and backgrounds you might still be stuck with 24bit and defringe.

that is pretty cool, i will be sure to try it out if it can work without photoshop or with fireworks

It does. YOu can launch it from its own image browser util.

sswift: thanks. I can always defring the image *before* using the program to reduce it right? Or doesn't that work for some reason? Anyway waht I meant was I want to reduce from 32 bit to 24/16/8 bit to reduce size BUT no loose and colours or use dithering. So if the app can work out how many colours I've used and it comes in at under 256, then it can be 8 bit for example. I just wondered if it did this automatically thus had a "non loss" save option that choose the best format yet retain the 8-bit (or at least pretty good) alpha channels.

Grey:
Well I'm not positive that it doesn't work, but I'm pretty sure. I'm getting some odd results with an image with a large translucent region when I have the background color set to black. The translucent region is darkened somewhat. When it's set to use the origin background it looks fine. But the program doesn't seem to read any colors other than white on areas with 0 alpha if you have origin background on. At least with 8bit. It doesn't give you color readings with 24bit so I couldn't say for sure with that.

As for your question about automatic color reduction, if you want to get your size down you'll want to reduce the colors. And even if it did detect if the image has fewer than 256 colors and then use 8bit automaitcally (it does not), 99% of the time you're not gonna find your image has less than 256 colors.

If you're concerned about file size then you should be willing to take a small but nealry unnoticable loss in quality. Otherwise you're just wasting your time to shave off maybe 100K off a game that's probably gonna end up being 10-15 megs. I'm doing all my shaving because I have some very large animated sprites for bosses and each one would be about 500K if I didn't reduce the colors to get them down to around 100-150K. With 10 bosses, and 10 planet backgrounds of the same size, without this compression, I'd be looking at 15 to 20 megs for that artwork alone. This way I'm looking at a more realistic 4 megs. For casual games, you really don't want to go over 10 megs for the shareware version if at all possible. If I'm lucky, my shareware version will be more like 8 megs and the full one no more than 20.

sswift: thanks for the info. My graphics folder is 8Mb (due to long animated strips) and they are all 32bit pngs so reducing to 3-4Mb is a saving worth making, but not at the cost of quality - tough call.

So it sounds like you'll be selling your game yourself, as if you were selling on the portals, you have to give them the full version anyway to wrap.

Grey:
The portals don't have users download the full version? They just have a key or something to unlock it? Ugh. That's no way to hook them with the quick to download version!

I will be selling it myself though in addition to putting it on portals. It would be foolish not to put the game on portals. I just never thought to ask whether or not the user would register with a code or a download.

yeah I thought I'd better let you know that ALL the portals get you to download the full version which is security wrapped then you enter a key so you are only making the short version for yourself (and possible affiliates) so you might not want to bother with the hassle..