Png experiments

Discuss the future, present and past of sequential art.

Moderator: Moderators

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

Png experiments

Post by ShadowCaster »

I'm doing some experiments with the png file format : I'm trying to make images that would compress well with png but badly with other formats.
I'd like to know if webcomic artists would be interessed by this kind of info.

To be more concrete RGB_cube_glue.png is a good example : a 1068x768 image that takes only 5.41 KB.
And you can print it and glue it if you want a nice RGB cube :wink: .
William G
Reinvents understanding
Posts: 560
Joined: Wed Jan 15, 2003 4:06 am
Location: South central...Korea. Word.

Post by William G »

All I know is that my images sizes got smaller after I switched to PNGs... so I give them a thumbs up
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

If you're interessed, you can still gain 25% more file size if you want me to optimize them for you (lossless optimization, no pixel data changed, only the file size is reduced).
Did you see this post ?
ragtag
Consistant Poster
Posts: 137
Joined: Sun Jul 22, 2001 7:00 pm
Location: Norway
Contact:

Post by ragtag »

PNG is a great format, a lot better than GIF. But do all web browsers support it these days?

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

Post by ShadowCaster »

It depends on what you call "support".
You can safely convert gifs to png, all but the oldest browthers will be able to see them correctly. (not perfectly if you use gama correction)
The problem is with Internet Explorer : except for the Mac version, png transparency is not handled properly yet : in palette images, every semi transparent pixel is invisible, and in non palette images, the image is shown on a gray opaque background. There are IE specific javascript workarounds but it's painfull to use them. Server side solutions are also possible but no less pain to use.
User avatar
Greg Stephens
Forum Founder
Posts: 3862
Joined: Sat Apr 14, 2001 7:00 pm
Location: Los Angeles, California, USA
Contact:

Post by Greg Stephens »

Most will display PNG, but MSIE doesn't yet support the coolest PNG feature- Alpha transparency. The best page for demonstrating this doesn't exist any longer (though the Internet Archive has an old copy, they didn't cache the background image, which sort of defeats the whole purpose of the page) but there are some good resources:

Start here for good overall PNG info (including a page on alpha transparency).

This page shows alpha transparency in action with a couple screenshots comparing how Opera displays it properly and MSIE screws it up (though there is a hack workaround).

This very cool page provides a few PNG transparency tests with images to illustrate the various incorrect results that could occur in various browsers.

PNG- Very cool format; Viewable in most browsers; Alpha transparency very cool, but not ready for prime-time (thanks mostly to MSIE not being ready for prime-time. Interesting how a browser's limitation becomes a limitation in the file format even though the file format is not at fault).
Good morning! That's a nice tnetennba.
William G
Reinvents understanding
Posts: 560
Joined: Wed Jan 15, 2003 4:06 am
Location: South central...Korea. Word.

Post by William G »

ShadowCaster wrote:If you're interessed, you can still gain 25% more file size if you want me to optimize them for you (lossless optimization, no pixel data changed, only the file size is reduced).
How are you doing it?
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

How are you doing it?
Depends on what "it" is : if "it" is the file optimisation, then it's running different png optimizing tools on the files and keeping the best result.
Do you want more precize info and url of the tools ?
Did you read this post till the end ?
If "it" is the automation of the directory scanning / downloading / optimizing / uploading process : I have DSL connection so my PC is always online. I've written a simple program that checks every day a list of directories on the net, download any new png in it, optimize them, and upload the result to a given ftp directory.
All I have to do is modify the the text file containing the list of web directories and corresponding ftp directory and the program takes care of the rest.
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

If like me you used to play with your handheld calculator in college, trying to draw nice looking curves using mathematical formulas, then I wrote a script for you :
http://happylandmaps.free.fr/png/experiments/rpn.php....

Each pixel's color is computed according to the formulas for R,G,B components, or RGBA, or HSV, or HSVA.
Most of the time, the resulting files either compress well when reencoded as optimized pngs or incredibly well with jpg encoding. 2KB exemple
It's still under developpement but gives nice results and allows easy smooth and well compressible alpha channel gradients.

If you want to see examples to figure out how to use the script or just to see nice generated images, go
http://happylandmaps.free.fr/png/experi ... _urls.html
Snoozer
Forum Member
Posts: 4
Joined: Wed Jun 09, 2004 1:56 am
Location: Minneapolis
Contact:

Post by Snoozer »

Most will display PNG, but MSIE doesn't yet support the coolest PNG feature- Alpha transparency. The best page for demonstrating this doesn't exist any longer (though the Internet Archive has an old copy, they didn't cache the background image, which sort of defeats the whole purpose of the page) but there are some good resources:
We use png files to import Photoshop elements into our mostly flash pages. The main reason we use them is for the alpha transparency.

http://www.alpha-shade.com/www/ASpages/AS054.jpg

The first frame of the page 54 has a flash rider and mount looking down threw a set of Photoshop clouds onto a flash landscape. The png files allow you to seemly blend the two programs together.

http://www.alpha-shade.com/www/ASpages/AS055.jpg

In the lower left panel a flash gun and background are mixed in with a Photoshop explosion. It's hard to tell where one program starts and the other begins. All the clouds, smoke and dust on this page are done with pngs while the rest is FlashMX.

Using the PNG files have given us a huge amount of flexibility in our project and a big time saver as well.

CB
Alpha Shade
http://www.alpha-shade.com
User avatar
Greg Stephens
Forum Founder
Posts: 3862
Joined: Sat Apr 14, 2001 7:00 pm
Location: Los Angeles, California, USA
Contact:

Post by Greg Stephens »

A great example of overlaying partly transaparent images over other backgrounds is Delta Thrives. You can see all sorts of techniques here- jpg images, transparent gifs, table layout, CSS layout, Flash. If only the gifs were pngs instead! Even so, you should be able to see how the technique works and since png offers better transparency options than gif, you can probably extrapolate how useful it could be.
Good morning! That's a nice tnetennba.
losttoy
Understands reinventing
Posts: 429
Joined: Tue Apr 02, 2002 2:00 pm
Location: Ann Arbor, MI
Contact:

Post by losttoy »

ragtag wrote:PNG is a great format, a lot better than GIF. But do all web browsers support it these days?
Not mine ... i had download the mentioned cube image and open it up in a different program. I do have a recent version of explore too boot. To me, it would seem like an extra hassle that normal web viewers would not want to go through. I never have that kind of problem with .gif or .jpg.
Image
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

Some IE browsers have the strange bug that they know how to handle most of the png features (except greyscale and partial transparency) but don't know that they do and react to direct png download as if it where a binary stream (even if correct mime type is sent).
But when the same png is linked from an img tag in an HTML file it's handled OK. Test this link :
http://happylandmaps.free.fr/png/RGB_cube_glue.html
losttoy
Understands reinventing
Posts: 429
Joined: Tue Apr 02, 2002 2:00 pm
Location: Ann Arbor, MI
Contact:

Post by losttoy »

yep, it worked for me in the html ... so how do I fix the bug or do I have to grin and bear it?
Image
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

If you really want to see the pngs when having their adress in the status bar, you can install the quicktime plugin that also deals with them.
Problem is that when bigger than browther's window, they get scaled down to adjust the screen (witch is nice) but you can't return to 100% zoom. :(
And also you won't get the Save as option, so if you want to save the image, you'll have either to search for it on your HD where the plugin stores it, or click "back" and right click the link, choose save as and redownload it, sice the plugin's cache is different from IE's cache.
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

Well, looking at the access logs, no one really tried the
rpn image generation script
.
I agree that the GUI is not nice and that some math knowlege is required to use it... Never mind.
But maybe some artists would like me to make some images.
Maybe like this one :
Image
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

I know it's a bad habbit to revive old threads (especially since it's not the Hype thread), but I updated the page (75 KB) and still hope it might be of interest to some artist.
You think it's ugly?, useless?, incomprehensible?... Just tell me please.
William G
Reinvents understanding
Posts: 560
Joined: Wed Jan 15, 2003 4:06 am
Location: South central...Korea. Word.

Post by William G »

The checkerboard background is distracting, but the rest of it is functional. Especially for showing examples.

I'd suggest a nice neutral grey for your background
User avatar
Greg Stephens
Forum Founder
Posts: 3862
Joined: Sat Apr 14, 2001 7:00 pm
Location: Los Angeles, California, USA
Contact:

Post by Greg Stephens »

It's not bad to revive old threads around here. If it was, then I'd have the forum set to delete old threads periodically.

As to the checkerboard background, it may be distracting, but it's an accepted method of displaying the background for images involving transparency.
Good morning! That's a nice tnetennba.
William G
Reinvents understanding
Posts: 560
Joined: Wed Jan 15, 2003 4:06 am
Location: South central...Korea. Word.

Post by William G »

Ah yeah, I never considered that...

even then, I think that maybe the background could be faded out a little bit.
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

The grey checkboard is effectively the classic backgroud to "highlight" transparency, but since most of the examples do not use transparency, I added a drop down list to choose the background.
Did anyone try to generate new images with the script ?
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

I improve the GUI by adding 4 self made icons to select the color model :
RGB ImageRGBA ImageHSV ImageHSVA Image
Also changed the default background of the example page to a hopefully less distracting light grey and blue stripe.
It still allows to visualize transparency, even if in a less obvious way than with the checkboard.
William G
Reinvents understanding
Posts: 560
Joined: Wed Jan 15, 2003 4:06 am
Location: South central...Korea. Word.

Post by William G »

thats better, it doesnt compete for the eye like the checkeboard does
Rip Tanion
Reinvents understanding
Posts: 635
Joined: Fri Apr 12, 2002 4:47 pm
Location: The Riptania Sky-Palace in da beauuuuuutiful Bronx.
Contact:

Post by Rip Tanion »

While this is pretty interesting and all, I'm wondering: what are the practical uses for all of this?
"Park the beers, and grab the smiles. It's flight time." - LtCdr. J. Robert "Bobby" Stone, USN (R.I.P.)
Locked