Png experiments

ShadowCaster · Post by **ShadowCaster** » Tue May 25, 2004 4:48 pm

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

.

William G · Post by **William G** » Tue May 25, 2004 10:11 pm

All I know is that my images sizes got smaller after I switched to PNGs... so I give them a thumbs up

ShadowCaster · Post by **ShadowCaster** » Wed May 26, 2004 11:20 am

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 · Post by **ragtag** » Wed May 26, 2004 11:30 am

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

Ragnar

ShadowCaster · Post by **ShadowCaster** » Wed May 26, 2004 11:51 am

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.

Post by **Greg Stephens** » Wed May 26, 2004 12:03 pm

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).

William G · Post by **William G** » Wed May 26, 2004 12:12 pm

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 · Post by **ShadowCaster** » Wed May 26, 2004 4:12 pm

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 · Post by **ShadowCaster** » Thu Jun 03, 2004 5:06 am

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 · Post by **Snoozer** » Wed Jun 09, 2004 5:44 pm

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

Post by **Greg Stephens** » Tue Jun 15, 2004 12:43 pm

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.

losttoy · Post by **losttoy** » Sun Jun 27, 2004 4:14 pm

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.

ShadowCaster · Post by **ShadowCaster** » Mon Jun 28, 2004 2:37 am

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 · Post by **losttoy** » Tue Jun 29, 2004 11:03 pm

yep, it worked for me in the html ... so how do I fix the bug or do I have to grin and bear it?

ShadowCaster · Post by **ShadowCaster** » Wed Jun 30, 2004 2:10 am

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 · Post by **ShadowCaster** » Thu Jul 15, 2004 3:07 am

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 :

ShadowCaster · Post by **ShadowCaster** » Mon Aug 02, 2004 8:07 am

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 · Post by **William G** » Mon Aug 02, 2004 10:52 am

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

Post by **Greg Stephens** » Mon Aug 02, 2004 11:16 am

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.

William G · Post by **William G** » Mon Aug 02, 2004 10:52 pm

Ah yeah, I never considered that...

even then, I think that maybe the background could be faded out a little bit.

ShadowCaster · Post by **ShadowCaster** » Tue Aug 03, 2004 3:05 am

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 · Post by **ShadowCaster** » Thu Aug 05, 2004 5:20 am

I improve the GUI by adding 4 self made icons to select the color model :
RGB

RGBA

HSV

HSVA

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 · Post by **William G** » Thu Aug 05, 2004 6:23 am

thats better, it doesnt compete for the eye like the checkeboard does

Rip Tanion · Post by **Rip Tanion** » Fri Aug 06, 2004 2:52 pm

While this is pretty interesting and all, I'm wondering: what are the practical uses for all of this?