Png file size

Discuss Scott McCloud's current online comic project. Be sure to check out <a href="http://www.scottmccloud.com/comics/mi/mi.html">the latest improv</a>!

Moderators: Scott McCloud, Moderators

Locked
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Png file size

Post by ShadowCaster »

Depending on the used software, Png image file size can differ significantly for the same pixel data. For Mimi's last coffee's pngs, the gain is 33% if using the Gimp with max compression. You can find the reencoded files here. Should reduce the swf size by 30%.
If Scott or any other cartoonist want's to have smaller png's but not bother with file optimisation, they can simply post here the url of a directory they want to be automatically scanned daily, and I'll add it to a list and the optimized files will be automatically available in a subfolder of the above directory.
Chronosome
Regular Poster
Posts: 29
Joined: Sat Jan 24, 2004 4:47 pm
Location: Los Angeles, CA, USA
Contact:

Post by Chronosome »

Wow...that's really nice of you. 8)

I've got a question...do these PNGs seem too chunky K-wise for their dimensions? I'm doing a little "Morning Ripoff" at a message board I frequent, and I may look into GIMP if it'll help keep things tiny.

I'd appreciate any advice you can spare. :)
-R o n A m o r i M
BuckBeaver
Frequent Poster
Posts: 74
Joined: Sun Dec 15, 2002 11:52 am
Location: Toronto, Canada
Contact:

Post by BuckBeaver »

A quick question Shadow - I'm a graphic and web designer but I've only worked with pngs sparingly until recently. Do you know of a good guide to optimizing them? Or can you explain the best way to optimize a png for the benefit of less-informed folks like myself?

Thanks!
Check out my NEW blog - PuppetVision
Retro-style puppet film and video goodness, delivered fresh to your computer each day!
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

I've got a question...do these PNGs seem too chunky K-wise for their dimensions?
They are indeed quite heavy for their size.
These are raw scanned pictures. The techniques used to produce the colours and the digitalizing process both give continuous tone colours as a result. Png (or gif btw) use exact colour redundancy to compress images. The red glow around the title will typically compress very badly with png.
It is important to work with lossless image file format like tiff or png or best the native format of the graphic tool you're using, but before uploading, convert a copy of the final result to the best suited format. In this example it's jpg.
Original pngs : 28K and 21 K
Reencoded png's with gimp : 23 and 17 K
slightly lossy conversion to jpg : 15K and 12K

the files are here
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

BuckBeaver wrote:A quick question Shadow - I'm a graphic and web designer but I've only worked with pngs sparingly until recently. Do you know of a good guide to optimising them? Or can you explain the best way to optimise a png for the benefit of less-informed folks like myself?

Thanks!
Strangely enough, the best source of advice I know to reduce image file size is written by Scott himself :
http://www.scottmccloud.com/comics/icst ... cst-3.html

Generally, choose the best file format for each image :
jpg for continuous colour image.
png for limited colours or if you need transparency.
gif for ultra small images (less 16x16) or if you need animation.
flash for vertorial images and interactivity.

While not yet widely supported, there are a lot of formats better suited than these, keep in mind they exist, they might become as common as the above.
vectorial formats, like SVG
spherical image with java applet and rectangular jpg or png (The technology exists since 5 years and still no web comics using this to my knowledge ! such a waste).
3D formats.
jng for continuous tone with transparency.


Sometimes it's difficult to choose between jpg and png
when the images are in mixed style :
for example,
this image is both in continuous tone for the background and in limited palette for the characters and text. Scott choose to scarify the usual clean looking for the file size that would probably have been 3 times larger in png for an image that is mostly in continuous tones. Look at the "jpg ink leaking" effect at the edges of the balloon.
Remark : a good solution if you're ready to loose the potential readers that do not have CSS enabled web browsers is to use image stacking : a jpg in the background and a semi transparent png on top of it.

OK, back to your question, if you're sure png is the best format for a given image and you want it small, you can :
Open the final unoptimised file with the GIMP and save it as png, setting compression to the maximum (9, 6 is default). Upload the resulting png.

If size is so important to you that you are willing to spent more time than that for a few more percentage reduction (0 to 5% reduction compared to the gimp encoder) There are a set of optimising tools, mostly command line but some GUI exists : try pngrewrite, pngcrush, optipng and pngout.
All are free, pngout gives the best results for a short time testing. (just type pngout file.png and you get a small file.pn2 that is the optimised png)
For the best possible result, try pngcrush -brute, pngcrush -m 0 , optipng, pngout with different parameters (very cryptic, just try), the do a pngrewrite on the original png and redo all the other tests on the resulting file. Note, the smallest file of all the above is generally less than 3% smaller than the pngout one, and less than 5% than the GIMP one.
Remark : pngout is not open source, so it might use compression schemes that are patented. I know I'm getting paranoid but the day lawyers and techies start to work hand in hand in big companies will be a dark one.
Chronosome
Regular Poster
Posts: 29
Joined: Sat Jan 24, 2004 4:47 pm
Location: Los Angeles, CA, USA
Contact:

Post by Chronosome »

Thanks for the suggestions and examples, Shadow. :)
-R o n A m o r i M
BuckBeaver
Frequent Poster
Posts: 74
Joined: Sun Dec 15, 2002 11:52 am
Location: Toronto, Canada
Contact:

Post by BuckBeaver »

Thanks Shadow!
Check out my NEW blog - PuppetVision
Retro-style puppet film and video goodness, delivered fresh to your computer each day!
Locked