Solved

Png compression

Posted on 2008-06-12
16
553 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
16 Comments
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21771530
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
ID: 21771598
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
ID: 21771723
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
Percona Monitoring and Management and Grafana

Proactive monitoring is vital to a highly-available environment. We have a quick start guide on Experts Exchange for Grafana users.

 
LVL 10

Expert Comment

by:bluefezteam
ID: 21771730
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
ID: 21771844
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
ID: 21771912
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
ID: 21771953
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
ID: 21771995
"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
 
LVL 30

Author Comment

by:Steggs
ID: 21772045
"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
ID: 21772057
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
ID: 21772077
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
ID: 21772160
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
ID: 21772225
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
ID: 31466634
thankyou
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21772317
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
ID: 21772677
that is crazy... maybe someone will come up with some better way to compress png's... time will tell

take care
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

628 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