GIDForums  

Go Back   GIDForums > Webmaster Forums > Graphics Forum
User Name
Password
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

 
 
Thread Tools Search this Thread Rate Thread
  #1  
Old 24-Aug-2003, 15:40
jrobbio's Avatar
jrobbio jrobbio is offline
Regular Member
 
Join Date: Jan 2003
Location: Loughborough, England
Posts: 840
jrobbio will become famous soon enough
Post

The Ultimate PNG optimisation guide


(Well it will be when I've finished)

I think PNG files are great, but they are darn harder to control than a gif or a jpeg and certainly have more exceptions. I liked them for several reasons: the fact that copyright information can be stored on them, good alpha transparency and comparitively small image sizes for large images. The only thing it cannot really compete on is with photographic jpegs.

Anyway, I've been using Macromedia Fireworks lately to convert images for my site to PNG's and the exported size, although modest isn't the best either so I would use PNGcrush tp limit the size of the file.

Now, however I've seen the light and found a fantastic program called PNGGauntlet that uses two programs to optimise rather than compress the images. The two programs in question are PNGOUT and pngrewrite, which do a fantastic job by themselves, but its so much easier under the PNGGauntlet GUI.

Finally, I used OptiPNG to compress the file much like PNGcrush used to do, but the program has a lot more functionality to fix files with problems.

I hope this has helped someone. Oh and if you don't have Fireworks, I suggest you use The Gimp that is available on Linux and there is also a windows port.

Rob
  #2  
Old 06-Nov-2003, 15:32
jrobbio's Avatar
jrobbio jrobbio is offline
Regular Member
 
Join Date: Jan 2003
Location: Loughborough, England
Posts: 840
jrobbio will become famous soon enough
Here's an excellent overview of PNG's http://digitalwaffle.livejournal.com/2003/09/15/

Rob
  #3  
Old 11-Dec-2003, 10:13
cs2 cs2 is offline
Member
 
Join Date: May 2003
Location: California
Posts: 107
cs2 will become famous soon enough

Re: The Ultimate PNG optimisation guide


Quote:
Originally posted by jrobbio
I liked them for several reasons: the fact that copyright information can be stored on them, good alpha transparency and comparitively small image sizes for large images. The only thing it cannot really compete on is with photographic jpegs.
Some comments on this...
1. You can also store copyright information with the GIF and JPG formats. In GIFs it is stored within the Comment block; in JPEGS, the same thing is accomplished via the Exif tag.
2. Yes, PNG has "good alpha transparency." However, the most popular browser in the world (Internet Explorer") does not natively support it. Google for "Internet Explorer" and "alpha transparency" (can't get the URL to render in this post for some reason).
3. Why can it not compete "with photographic jpegs?" PNG is capable of 48-bit color, while JPG is only capable of 24-bit max. Doesn't that make PNG better in this respect?
__________________
The Whole Internet, LLC
Visit our Homepage, -or-
use our online CSS Editor
  #4  
Old 11-Dec-2003, 10:27
jrobbio's Avatar
jrobbio jrobbio is offline
Regular Member
 
Join Date: Jan 2003
Location: Loughborough, England
Posts: 840
jrobbio will become famous soon enough

Re: Re: The Ultimate PNG optimisation guide


Quote:
Originally posted by cs2
Some comments on this...
1. You can also store copyright information with the GIF and JPG formats. In GIFs it is stored within the Comment block; in JPEGS, the same thing is accomplished via the Exif tag.

Yes this is true though its easier to do in some programs like GIMP than in Fireworks, but i'm not too sure.

Quote:
2. Yes, PNG has "good alpha transparency." However, the most popular browser in the world (Internet Explorer") does not natively support it. Google for "Internet Explorer" and "alpha transparency" (can't get the URL to render in this post for some reason).
This is a bit of a curious one and being a Mozilla Firebird fan I deprecated IE a while back. However, the curious thing is that Alpha transparency created in Fireworks is correctly viewable in IE, but not when made with GIMP or Photoshop, so it is a bit of a strange phenomenom.
Quote:
3. Why can it not compete "with photographic jpegs?" PNG is capable of 48-bit color, while JPG is only capable of 24-bit max. Doesn't that make PNG better in this respect?

In terms of quality to file size (for the internet), JPG wins hands down with PNG having humongous file sizes. If I was to make printable photographs, I'd work with PNG but wouldn't inflict someone with an e-mail of it

Rob
  #5  
Old 12-Dec-2003, 08:03
Dioxaz Dioxaz is offline
Awaiting Email Confirmation
 
Join Date: Dec 2003
Posts: 3
Dioxaz is an unknown quantity at this point
Quote:
This is a bit of a curious one and being a Mozilla Firebird fan I deprecated IE a while back. However, the curious thing is that Alpha transparency created in Fireworks is correctly viewable in IE, but not when made with GIMP or Photoshop, so it is a bit of a strange phenomenom.

How can alpha transparency, even on PNGs created with Fireworks, work under IE?? Do those PNGs have something special? Because, as far as I can see, you can only make 32-bit PNGs appear transparent under IE by using a PNG-behavior hack. Just like the one on my website: membres.lycos.fr (look at the logo)

About JPEG beating PNG for photographic images, that is true. But there are other facts nowadays:

PNG aren't huge if you use a correct visual approach when created or edting an image from scratch (generally, CG graphics compress to a 5:1 compression ratio or lot better, which can be considered as a good performance).

Also, broadband connections are getting more and more widespread now, so putting True Color PNGs on a website will become less and less a problem (a 200 KB image only takes 3 seconds to show on a 512K ADSL modem). And about mailing PNGs to anyone, here again, depends on the type of the image. Surely, nobody will flame you because you dared mail an image like this one: membres.lycos.fr (just check the file size : 61 KB or something -- yes, you CAN do miracles with PNG compression^^)

Anyway, if there is now a set of tools that can re-compress images better and have a GUI, well that really rocks! And I think it can help profession really make a fair use of PNG, and not just only considering the awful job Photoshop does with PNG. Thank you, Rob, for that info (and Greg Roelofs for pointing it out on the PNG website)

edit: there is one feature that I love with PNG is loss-less compression with excellent file size/quality compromise. I also consider (especially for art) having a full quality PNG can be better than a just a good quality JPEG (even if the PNG makes 10 more seconds to display^^). Just think about the visual comfort it gives (I said broadband connections could progressively eliminate the need for JPEG on CG graphics, if only people were doing things correctly )
  #6  
Old 12-Dec-2003, 10:00
jrobbio's Avatar
jrobbio jrobbio is offline
Regular Member
 
Join Date: Jan 2003
Location: Loughborough, England
Posts: 840
jrobbio will become famous soon enough
Have a look at these comments on a evolt article To PNG or not to PNG:

here and here(mine)

Rob
  #7  
Old 15-Dec-2003, 01:37
Dioxaz Dioxaz is offline
Awaiting Email Confirmation
 
Join Date: Dec 2003
Posts: 3
Dioxaz is an unknown quantity at this point
Oh, thanks for that article. It's a very interesting one. But all the things mentionned there I'm already aware of them .

BTW, I re-made the test with the 3 images of the article. And I came with even smaller file sizes! Take a look:


test1.png -- 1,567 bytes


bw.png -- 382 bytes (here, I cheated a bit: I forced an 8-bit palette file... and it compresses better!!)


photo.png -- 8,530 bytes

I did nothing more than taking the original images Photoshop/Image Ready produced and re-compressing them into PNGOut, using correct parameters (aka filter 0 for palette images).

I also noticed a thing about the original images: they've apparently been created on a Mac according to the gamma value I found into the gAMA chunk (0.55000). That explains the mentionned problems about about gamma with those images (well don't know if the topic refered to those images or other ones... anyway ). So, I removed the gamma chunk to have fair results.

Other thing, about gamma:

I made a test about displaying gamma correction in MSIE 6 and Mozilla 1.4. The test above features a non-gamma-corrected image, a gamma-corrected one, a gamma-corrected one with sRGB chunk, a non-gamma corrected one with sRGB chunk and finally a gamma-corrected one with a value of 0.55556 (aka Macintosh gamma value).

The images are on this page: membres.lycos.fr (well, sorry for the ads, I'm hosted on Lycos, you see^^)

You can feel free to test this page under any browser you've got. For my part, I tested it with MSIE 6 and Mozilla 1.4. MSIE 6 fails to render all the gamma-corrected images but not the sRGB chunk-only and the non-gamma-corrected one. Even the Mac-gamma-corrected display slitghly too dark, compared to what Mozilla shows (all images render correctly). I've made screenshots:
membres.lycos.fr
membres.lycos.fr

Maybe I should post that into the article you suggested me . Or if the gamma part is not at its place here, just point me out .
  #8  
Old 18-Dec-2003, 04:49
jrobbio's Avatar
jrobbio jrobbio is offline
Regular Member
 
Join Date: Jan 2003
Location: Loughborough, England
Posts: 840
jrobbio will become famous soon enough
That is one great post dioxaz, I must admit that the parameters of PNGout were beyond my knowledge, but I sure will test out filter 0 etc next time I try. You said you cheated for the black and white image, but I suppose the objective is to get the file as small as possible without reducing any quality, which is what you achieved.

Maybe you should contact the original PNG creators about what you have found since I think these are very interesting finds, especially the impressive file sizes.

Rob
  #9  
Old 18-Dec-2003, 09:48
Dioxaz Dioxaz is offline
Awaiting Email Confirmation
 
Join Date: Dec 2003
Posts: 3
Dioxaz is an unknown quantity at this point
lol, in fact lots of parameters can play a role when encoding a PNG image. For the test, I used the latest version of PNGOut (25th September release I think) which helped me achieving better results. For filtering methods, there's a few tricks to know in order to get better compression without losing any quality (my purpose). Those tricks are even mentionned in Greg Roelofs's 'PNG: the definitive guide' book ( www.libpng.org ). For example, I always noticed that palette images and true color ones that feature plain colors or simple gradients compress better with filter 0. And high detailed images compress better with filter 5 generally. But any person who has a good PNG knowledge already know these tricks I think . Also, OptiPNG (another re-compressing program, faster than PNGOut but a bit less efficient too) lets you play with the 'Zlib memory' parameter, which can also help in acheiving smaller files (not that significant but, I've seen some images compress better with Zlib memory factor of 6, instead of 9, generally)

Now, about the test. Note that I only achieved slightly smaller file sizes (a few bytes less than your images) so I assume that your PNGOut re-compressed the 3 images with filter 0 (by default), so don't worry . Just remember how we can play with filters to achieve better compression.

But let's speak about a hidden feature of PNG. PNG had been designed to compress palette images better in fewer bit depthes when they display 16 colors or less and grey images in 16-color greyscale or less. But that's not always true. Oddly, most 16-color or 2-color images I have on my hard disk compressed better when saved... in 8-bit mode!!
That's weird, really. And even, on tiny images that display a few colors and generally compressed better in GIF than in PNG, I managed myself to get smaller file sizes than the GIFs, using PNGOut and forcing an 8-bit palette output. (for greyscale images, most of them -- my drawings for example^^ (here: membres.lycos.fr ) -- compress better in 8-bit grayscale than in palette mode, though, when using PNGOut)
That point is neither mentionned on the PNG website, nor on Greg Roelofs's PNG book.

Maybe you're right. I should mail Greg Roelofs about that (I had that idea one day, ya know?^^). That "hidden feature" always fascinated me... as I was wondering why most of my 16-color palette images compressed better forcing an 8-bit PNG...

Last thing about me: I like to be called 'maniac of PNG' and I somewhat became an addict to that format (espacially when I try to convince artists to use PNG instead of JPEG, because it garantees a better visual comfort and does not produce that huge file sizes, considering that more and more people have access to broadband conncetions nowadays^^;. So, if I'm using some vocabulary that seems obscure, just point me out .
Also, using palette-based PNG images instead of GIF is so obvious to me that I don't reference to that fact. I never use GIF... except when making animations (which hardly happens with me as I don't like makng animations ).
 
 

Recent GIDBlogProblems with the Navy (Officers) by crystalattice

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Actionscript reference guide for Flash jrobbio Web Design Forum 2 12-Sep-2003 14:33
Video Card FAQ & Overclocking Guide (Updated) asanthadenz Computer Hardware Forum 2 05-Mar-2003 18:37

Network Sites: GIDNetwork · GIDWebHosts · GIDSearch · Learning Journal by J de Silva, The

All times are GMT -6. The time now is 02:40.


vBulletin, Copyright © 2000 - 2010, Jelsoft Enterprises Ltd.