Everything2
Near Matches
Ignore Exact
Full Text
Everything2

PNG

created by freezeup

(thing) by freezeup (3.3 y) (print)   ?   (I like it!) 1 C! Sat Nov 13 1999 at 9:58:48

PNG's Not GIF

Or, the Portable Network Graphic.

A bitmap graphic format designed by the GNU folks as a replacement for the GIF, which uses the proprietary LZW compression algorithm. PNG also has spiffy features like alpha channels, meta-information and that venetian blind interlace thing.

How long till all the three-letter acronyms are used up?


(thing) by CaptainSpam (4.9 y) (print)   ?   (I like it!) Mon Jun 05 2000 at 20:42:37

A spiffy alternative internet graphics format. It can take 16M colors (Which GIF can't do, 256 color limit) and maintain perfect quality (Which JPEG can't do well, with it's compression methods).

That's all the common graphics user might care about, but hey, with alpha channels and meta-information, as well as not being a proprietary image format owned by a company who doesn't realize the rules are changing, it's got something for everyone.

One of the few problems with PNG, however, is the horrid filesize on 'noisy' or nonuniform graphics. Photographs, especially, do NOT compress well under PNG. Sure, they maintain perfect quality, but the filesize is inflated to numerous times the size of a JPEG of the same image with somewhere in the range of compression 20. Thus, PNG is far better suited for simple graphics or graphics with relatively 'clean' colors, such as drawings, comics, web widgets, etc. In situations where JPEG's lossy compression isn't noticeable, PNG might suffer.

PNG is the official graphics format of Exclaim Industries. In that it's all I use.

UPDATE!!! I have been informed by blaaf that more recent versions of the GIF image format (Anything past GIF98) CAN, in fact, handle more than an 8-bit color pallette. Hence the strikeout text. Oops.

And now yerricide tells me it's possible to do 16mil color images with GIF89, but... um... I'm not exactly certain his method is 'simple', per se... Still waiting to hear back from him (Honestly, I'm not sure if he's being sarcastic or not)...

Righto, he was serious. Except he described it as more of a hack.


(thing) by mblase (1.9 wk) (print)   ?   (I like it!) 1 C! Mon Apr 23 2001 at 21:43:37

PNG graphics seem to be the best-kept secret on the World Wide Web. Netscape's browser has supported it since version 4.04, and Internet Explorer has had it since version 4.0. You can put it right into an IMG tag and have it show up when people visit your site. Adobe Photoshop supports it. Macromedia Flash supports it. QuickTime supports it. But gosh darn it, nobody seems to be using it.

Which is a shame, because it's got all the best features of GIF -- lossless compression, optional transparency -- and JPEG -- millions of colors, patent-free algorithm -- plus a few extras that neither one has, like embeded metadata that search engines can index, automatic gamma correction, and an alpha channel for multiple levels of transparency. It's smaller than a GIF of the same image, and while larger than a JPEG, provides far more detail and no loss of data.

The alpha channel is the biggest obstacle to immediate widespread acceptance of PNG, it seems -- only Netscape 6.1 supports transparency in PNG graphics so far. While this is certainly not the most important feature of the PNG format, it's probably the coolest and consequently the most annoying omission.


(idea) by Stavr0 (1.5 mon) (print)   ?   (I like it!) Fri Apr 23 2004 at 16:21:03

Workaround for Internet Explorer's faulty PNG Alpha channel support

The only thing that still prevents PNG's universal adoption is The Evil Empire, as usual. There has been two releases of Internet Explorer and still do not support the alpha trasparency channel properly. Fortunately, there is an answer, a simple answer. The workaround is a kind of poetic justice--The fix only works on IE browsers, and only IE browsers need the fix. It is done with Microsoft proprietary extensions to CSS, which means it would get ignored by any non-microsoft browser.

We are going to use the AlphaImageLoader filter from the Microsoft stylesheet extensions. It is perfectly equipped to deal with the PNG transparency channel. First, let's use the SPAN tag to load our IE-only image. We'll create a style entity that matches our picture size exactly then filled with our source image.

<SPAN style="width:120px;height:40px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png');" >

At this point, we can try it out in Internet Explorer. Bravo. Now what about those non-IE folks? They'll get a empty SPAN entity, because that filter statement won't mean anything to them. Here's where we get really clever.

<IMG style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" SRC="transparent.png" />

Whoa. We load the same image again into that SPAN entity but we make it invisible. Why? Because only the IE browsers will hide the IMG and other browsers will show it normally. So IE browsers see this:

<SPAN style="width:120px;height:40px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png');" ><IMG style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" SRC="transparent.png" />

while everyone else sees

<SPAN style="width:120px;height:40px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png');" ><IMG style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" SRC="transparent.png" />

All this works without dynamic HTML generation,JavaScript or Java applets. A winning hack!

There is a simpler way to get transparent background PNGs to work in IE. Simply downconvert the truecolor picture to a 256 colour palette, then pick a colour to assign as transparent. Note: this is not alpha blending, it's GIF style transparency mask.

Plaudits to Mark Wilton-Jones for his most excellent tutorial http://www.howtocreate.co.uk/
Razzberry to MS for not fixing Q265221

(thing) by sketerpot (6.1 mon) (print)   ?   (I like it!) Sat Mar 03 2007 at 1:20:06

PNG is pronounced "ping". This is in the official specification. With GIF, you have at least two valid pronunciations. Not so with PNG. Compelling as PNG's feature set is -- 24-bit color with an alpha channel, good lossless compression, support in all modern web browsers -- the most compelling reason to use it is probably to avoid embarassment. You can say "PNG" in front of your friends and they won't laugh at you.

printable version
chaos

MNG Only Slightly a Geek Girl How do you pronounce GIF? How to choose the appropriate graphics format
LZW JPEG artifacts JPEG Unisys
The 'broil' setting on an oven GIF Why Macromedia Flash is not a replacement for HTML alpha channel
Internet Explorer broken PNG support workaround The IE Problem Papua New Guinea How to stay up all night if you've been up all day
alpha transparency GNU Microsoft Paint Low End Mac
Internet Explorer These aren't the droids you're looking for Blue Moon Rendering Tools Hack
Y'know, if you log in, you can write something here, or contact authors directly on the site. Create a New User if you don't already have an account.
  Epicenter
Login
Password

password reminder
register

Everything2 Help

Cool Staff Picks
Little presents from the Node Fairy:
Before Choice Disturbs
The Diametric Literature Hour
Jesus Christ Superstar
spark plug
The quest for high rep nodes
You're so funny I think I'll kick your ass
Hecate
Nutter Butter
Hunter S. Thompson on George W. Bush
Reading between the lines of an Annual Report
Pete Doherty
Camel
Why it's rude to open a door for a woman
New Writeups
Heitah
Why I love Everything2(person)
trixingee
Dungeon Mastering for the first time(idea)
Netrat0
It's Called Subtext, Honey(person)
eyeofthebeholder
The Dragon(idea)
Heitah
consist, comprise, constitute, or compose(idea)
Meezzio
Gotlandssnus(thing)
argv
Astral Plane(idea)
Madara
One Winged Angel(fiction)
Tom Rook
Talk is cheap(poetry)
shaogo
Adelle Davis(person)
Aerobe
race car g sfjsgsd(poetry)
Binah
Dream Log: July 5, 2008(dream)
StrawberryFrog
Forgotten things in space(idea)
antigravpussy
velvet revolution fairy tale(idea)
Heitah
Nerve agent VX(thing)
This affordable entertainment brought to you by The Everything Development Company