FAQFAQ   SearchSearch   MemberlistMemberlist   Log inLog in   RegisterRegister
Png file size
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Zwol.org Forum Index -> Morning Improv
Previous: Post10,000th post to the forum today! Next: PostShaolin Soccer  
Author Message
ShadowCaster
Frequent Poster


Joined: 23 Sep 2003
Posts: 93
Location: France

PostPosted: Mon May 10, 2004 11:01 am    Post subject: Png file size Reply with quote

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.
Back to top
View user's profile Send private message
Chronosome
Regular Poster


Joined: 24 Jan 2004
Posts: 29
Location: Los Angeles, CA, USA

PostPosted: Mon May 10, 2004 2:57 pm    Post subject: Reply with quote

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

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
Back to top
View user's profile Send private message Visit poster's website AIM Address Yahoo Messenger
BuckBeaver
Frequent Poster


Joined: 15 Dec 2002
Posts: 74
Location: Toronto, Canada

PostPosted: Mon May 10, 2004 6:37 pm    Post subject: Reply with quote

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!
Back to top
View user's profile Send private message Visit poster's website
ShadowCaster
Frequent Poster


Joined: 23 Sep 2003
Posts: 93
Location: France

PostPosted: Tue May 11, 2004 3:36 am    Post subject: Reply with quote

Quote:
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
Back to top
View user's profile Send private message
ShadowCaster
Frequent Poster


Joined: 23 Sep 2003
Posts: 93
Location: France

PostPosted: Tue May 11, 2004 4:27 am    Post subject: Reply with quote

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/icst-3/icst-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.
Back to top
View user's profile Send private message
Chronosome
Regular Poster


Joined: 24 Jan 2004
Posts: 29
Location: Los Angeles, CA, USA

PostPosted: Tue May 11, 2004 10:58 am    Post subject: Reply with quote

Thanks for the suggestions and examples, Shadow.
_________________
-R o n A m o r i M
Back to top
View user's profile Send private message Visit poster's website AIM Address Yahoo Messenger
BuckBeaver
Frequent Poster


Joined: 15 Dec 2002
Posts: 74
Location: Toronto, Canada

PostPosted: Tue May 11, 2004 8:12 pm    Post subject: Reply with quote

Thanks Shadow!
_________________
Check out my NEW blog - PuppetVision
Retro-style puppet film and video goodness, delivered fresh to your computer each day!
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Zwol.org Forum Index -> Morning Improv All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group