Png compression

Photoshop CS3, different types of PNG achieve dif effects.

PNG24 gives you very high quality well compressed images with alpha transparancy so you can achieve really nice effects.

PNG8 - gives you more compression options...

In photoshop just choose SAVE FOR WEB and you can set how much compression you need.

what needs doing, I may be able to help you more

Hi bluefezteam,

I am wanting to use a large png24 with alpha transparency for a nice backgroudn image. I use cs2 and there are no compression options for png24. Currently, the image size is over 700kb and obviously I would like to get this size massively reduced if possible

Thanks

The problem you have with PNG is that it is a lossless algorithm - it can't compare to the likes of JPEG's lossless algorithm (except when JPEG is used in lossless mode: 100% quality).  You mention a "large png24 with alpha transparancy" - 700K isn't bad based on that loose description.

Generally PNG compression is well supported by most leading packages these days. For a good free alternative to Photoshop you could try GIMP.  It has some good array of options but the interface may be a little odd until you're used to it.

Ok, what's the nature of the image? Is it a photo, or more vetor style artwork
Is it possible to see this image and I can offer specific advice.

failing that, if there are areas of the image that don't rely on transparancy, you could export them to a new photoshop file, export them as a JPG with comrpession applied to it (that your happy with visuall, as some levels of compression produce blurry artifacts.)

This will reduce the complexity of that object and you can open it and add it to the original artwork so when you export it as PNG 24 it will have less data and therefore be smaller


Failing that there's also a product call PNG Crush (which is free so thats good) and it can shrink pngs down and in some cases by a lot - a tutorial I used when I needed to try it out is here:

http://www.neilturner.me.uk/2005/02/05/quickly_compress_png_images.html

However if it's possible and you can show me/upload the original PNG or the photoshop file you built it from I can see what's achievable in compression and then talk you through that.

Thankyou both for the help so far... I have attached the file. I will look at pngcrush and gimp
mobileweb.png

at first glance can't you have this as a solid JPEG and apply a transparency filter to it?

Alternatively load it into a FLASH movie as a small JPEG and set transparency - let me create a demo

"In the meantime I will experiment with the compression - going to be awkward as the transparency has been applied to the graphic so I can't mess with the original solid image."
mobileweb.jpg

"am I right in thinking that this is for a webpage - I may be wrong.

if it is then save this image (nice image by the way) as a comrpessed JPEG (say its called graphic.jpg)

then use the following code: this would make the image transparent for IE, Firefox etc - so you would have a jpg of around 50kb... with the effect you need"


Yes filters is a decent backup plan. I am overlaying text on this image for a webpage. Obviously the text will inherit the filter... but I can use css to overvome this. I wanted to investigate the transaprent png avenue first just because it is easier and cleaner

Thanks for the good advice so far

here's the flash solution...

As you can see the PNG is still transparent, text and images under it show through, and its only 42KB

http://www.bluefez.net/test/

beauty of flash is that it can compress PNGs like a JPEG but retain alpha transparency - used it lots of times to achieve this effect...

well it really sounds like the flash may be the easiest route, please feel free to keep the swf file and code if it helps.

You can overlay text onto the flash file easy enough, i will mess with teh PNG you have sent me with the solid image.

As an update the most I'm managing to shave off this is 100KB - I say most, that's a lot really.

I did this my taking the original solid colour, exporting it with 60% JPG compression, opening the compressed JPG and applying 40% transparency then saving as PNG24 - filesize around 600kb

One other point about the PNG at this point for webwork is that PNG is only supported in new browsers, I've been using PNG in a project recently and the clients complaining about IE6 support - the PNG goes grey...

This is why I'm opting for SWF files, tiny in comparison and the cross browser/backwards compatibility goes down to Internet Explorer 4.5

thanks for trying the compression. I tried pngcrush and couldnt get hardly any off of it.

Yeh your right about ie6... Im using a conditional comment to supply ie6 with a different stylesheet... gifs replace pngs.

Thankyou for your excellent help and advice. I think I am going to go with filters on bg image over the flash because I like clean pages when the css is turned off.

thankyou

Hey that's not a problem, good luck with it.

Filters will give you the 'cleaner' option for your code as you say, without having the complexity of all the flash javascript, but how crazy is it that a flash file can handle a PNGs transparency but compress like a JPG..

700kb PNG > 45kb SWF.

Thanks for the mark and again good luck.

that is crazy... maybe someone will come up with some better way to compress png's... time will tell

take care