Solved

Png compression

Posted on 2008-06-12
16
544 Views
Last Modified: 2013-12-20
Hello,

Can anyone recommend any programs that will compress png's. I only want answer from people that have experience using this software... not just a google search ;)

Thanks
0
Comment
Question by:Steggs
  • 8
  • 7
16 Comments
 
LVL 10

Expert Comment

by:bluefezteam
Comment Utility
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
0
 
LVL 30

Author Comment

by:Steggs
Comment Utility
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
0
 
LVL 19

Expert Comment

by:Barthax
Comment Utility
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.
0
 
LVL 10

Expert Comment

by:bluefezteam
Comment Utility
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.
0
 
LVL 30

Author Comment

by:Steggs
Comment Utility
Thankyou both for the help so far... I have attached the file. I will look at pngcrush and gimp
mobileweb.png
0
 
LVL 10

Expert Comment

by:bluefezteam
Comment Utility
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
0
 
LVL 10

Accepted Solution

by:
bluefezteam earned 500 total points
Comment Utility
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

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.
<img src="graphic.jpg" style="filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;">

Open in new window

0
 
LVL 30

Author Comment

by:Steggs
Comment Utility
"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
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 30

Author Comment

by:Steggs
Comment Utility
"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
0
 
LVL 10

Expert Comment

by:bluefezteam
Comment Utility
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...

0
 
LVL 10

Expert Comment

by:bluefezteam
Comment Utility
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.
0
 
LVL 10

Expert Comment

by:bluefezteam
Comment Utility
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
0
 
LVL 30

Author Comment

by:Steggs
Comment Utility
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.
0
 
LVL 30

Author Closing Comment

by:Steggs
Comment Utility
thankyou
0
 
LVL 10

Expert Comment

by:bluefezteam
Comment Utility
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.
0
 
LVL 30

Author Comment

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

take care
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
The viewer will learn how to dynamically set the form action using jQuery.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now