Twilight Universe

*UPDATE 17/9/2003 - Corrected some minor errors. Also this article has helped contributed to the development of PNGOut.

One of the sad things about web standards is that they aren’t. Various browsers implement the standards in different ways, or in many cases, fail to implement them properly. The most notable failure is Internet Explorer, even the new version, but Gecko based browsers (Mozilla, Netscape, etc) still have serious issues, not to mention other browsers.

One weird browser inconsistency is the implementation of PNG files (pronounced ‘ping’). PNG is a format that has been around for a long time, and I am a great fan of, but still isn’t used as much as it should be. If you don’t know about it – you should do.

PNG’s Are Better Than GIFs.

There, I said it. It’s a statement based on fact. PNG supersedes GIF in almost every way, the only exception is animation, which PNG doesn’t support (though its companion format MNG does). There’s no quibbling about this, its cold hard fact. I’m going to illustrate this with some tests I’ve performed, but first a little history for those that may not know much about PNG.

PNG is a replacement for GIF (pronounced with a soft g like in gerbil – ‘jif’, not ‘guh-if’ – so says the creator of the format.) which you all should have heard of. It was designed because Gif was getting very old (created in 1987) and was really out of date in ’95 when the PNG specification was drawn up. Another factor was that UniSys decided to start calling in licensing charges for the LZW compression that Gif uses, it hadn’t before… and so a free format was born.

Implementation of this format was slow however. Currently all browsers support the display of PNG files, but not all of the features of the format.

What Are PNG’s Features?

• Lossless Compression – Unlike JPEG which throw away data and guess how an image is composed, PNG compression never throws away information. This avoids the artefacts and blurring you often find in JPEGs.
• Multiple Bit Depths – While GIF is commonly only supported in 8bit palettes (256 colours) and JPEG is only 24bit (16.7 million). PNG supports any bit depth to the power of two – from 1bit (2 colours) to 48bit (too many to even count). Though the most common formats are 8bit and 24bit. However it must be stressed PNGs at depths over 8bit were designed for perfect lossless archival quality with good compression, and are not designed to compete with JPEG for 24bit web use.
• Gamma Correction – Gamma correction, in applications that support it, ensures images appear the same across all platforms. Even across Windows and Macintosh there is a large difference in display.
• Alpha Information – PNG supports multiple modes of transparency. Alpha channels for 24bit images, RGBA for palette images (where not only a value for Red Green and Blue is stored, but one for Alpha), and binary (GIF style – either transparent or not) transparency.
• Interlacing – PNG supports interlacing (progressive display of images while they are loading) like both GIF and JPEG. It works in a different way to GIFs and is considered one of the better interlacing display methods available.
• Smaller File Sizes Than GIFs – PNGs compression algorithm is better, and produces smaller files than GIFs for 8bit images. At least.. it should, as I will soon demonstrate.

But… Why Should I Use It?

Simply because, as I’ve said before, its better. File sizes are usually significantly smaller, and that means lower bandwidth and shorter download times. For the web these are the primary reasons for any choice of format. It’s that simple – PNGs will save you bandwidth, and hence money, in the long run.

Much is often made of the lack of browser support for PNGs alpha transparency in some browsers (well.. just IE/Win I think now, IE/Mac does a fine job). This is missing the point – for GIFs are surviving on binary transparency just fine, and everyone still uses them – an outdated format that is over 16 years old!

While the artistic and design community may want to have better transparency, we can cope – for now at least – with doing it the way GIF has done. The more support PNG has, the more incentive for developers to support its features, like alpha palettes. The more we use PNG, the less we rely on old outdated GIFS.

I Thought PNGs Were Larger Than GIFs.

Not at all! Or at least, they shouldn’t be. This is a myth that is spread mostly because of the appalling compression in Adobe PhotoShop. Really.. its that bad. PNG leaves some room to manoeuvre with how a program compresses the files, Adobe has obviously not tried to optimise things at all. Things did improve with their ‘Save For Web’ option (basically using the code from ImageReady) but it’s still the worst around.

However, there are many ways to fix that, even with files that have already been saved.

The Software

This is the software I’ll be using to illustrate the benefits of PNG compression. I have separated them into freeware utilities, and commercial applications. The main difference being that the freeware software needs a PNG file to work with, while using the commercial software I can work from any file.

The following are commercial applications:
Adobe Photoshop – The standard for graphics software.
Web Image Guru – A suite of utilities, including a plug-in for Adobe PhotoShop that mimics the Save For Web features. Apparently has excellent compression.

The following are freeware utilities:
PNGCrush – the original, and now standard, for PNG compressing utilities.
OptiPNG – Similar application to PNGCrush, claims it has “a wider automatic search space (which may lead to a better compression factor), and it runs faster.”
PNGOut – A self coded utility, written by Ken Silverman (of 3D Realms fame). Claims to beat PNGCrush significantly.
PNGRewrite – Not really a compression program. PNGRewrite aims to optimise the palette of the file (bit depth, palette order, transparency info.. etc) not optimise the compression, and hence reduce the file size. In theory this should be done in any application, but most don’t perform well.

The freeware apps are all command line apps, but for PNGOut and PNGRewrite I’ll be using a free windows shell for them called PNG Gauntlet. All this does is provide a friendly windows interface for the two programs. To run PNG Gauntlet you need to have Microsoft .NET 1.1 installed, but many people do now anyhow.

This is the image I’m using –

A simple image of the Union Jack, clean colour space, with some anti-aliasing between the colours. it’s the kind of image that is ideal for 8bit palettes, and the sort of thing that might realistically be on a web page. Moreover – it is the exact kind of image someone might save to GIF. Perfect for what I’ll be testing.

Both the PNGs and the GIF are saved using Adaptive palettes. While Perceptual can often be better with complex images, Adaptive performs best at lower bit depths and simpler images.

The GIF of this image is 4.62 KB (4,734 bytes), around what you would expect.

I created this image in PhotoShop initially, so it made sense to test out Web Image Guru (WG) and PS first. Equally the other utilities only work on existing PNG files.

PS Test - 5.73 KB (5,870 bytes)
WG Test - 3.16 KB (3,236 bytes)

Woah, that’s a huge difference! Surely that can’t be all down to compression?

No, its not. After a look at what was going on I noticed that PS was including a full 256 palette entries, while WG said there were only 99 colours needed. Indeed a per pixel comparison confirmed this.

Lowering the number of colours in PS produced the same image, but with a lower file size. Interestingly I found that saving the image to BMP (24bit), opening the file, and then saving for web made PS agree that there were indeed only 99 colours.

Obviously there is something in working from its own format that causes PS to act strangely when saving to web. Here’s a comparison with the new file

PS Test 2 - 4.12 KB (4,225 bytes)
WG Test - 3.16 KB (3,236 bytes)

1.5kb removed, just by doing something that PS should be doing itself. From here I decided to compare the optimisation utilities on both the PS tests and the WG test as they are produced from the same base file.
N.B. – Web Guru can optimise files by itself, not using the PS plug-in, and managed to optimise the original PS test. However as it only managed to optimise it down to 130 colours the image would appear to not contain the same information. The new files are exactly the same in contents, and so a fair comparison can be achieved. It is rather worrying that the original PS saved image appears to introduce colour information into the image.

Final Results.

In Red are images that are larger than the GIF,
In Green are images that are smaller than the GIF.
In Blue is the smallest file.
In Purple are files of note.

PG test on PS1 – Note that this is the smallest file from the original PS test, but it is still larger than the GIF. Its seems that PhotoShop PNGs saved using the default options are hard, and in this case impossible, to reduce down to a level below GIFs. Probably due to the redundant (or possibly introduced) colour information. This is totally unsatisfactory in such an expensive and supposedly standard application.

PC test on WG – Note that PNGCrush actually increases the file size of the image. While it decreased file size in the case of poorly compressed images, it still performed the most poorly overall, however it is the oldest utility on test.

PR test on WG – PNGRewrite also increases the file size, but in this case by a significant amount! It may be that the original file was already better ordered than PR can achieve, however this is still puzzling.

Best PNG file size = 2.97kb (3,044 bytes)
Total PNG saving over GIF = 1.65kb (1,690 bytes) a saving of 35%

Ok, its smaller, so what?

Well, smaller files mean faster loading page, less server space being used, and less bandwidth being used.

Whether you are hosted with a professional hosting company, or Geocities bandwidth is important to you. Bandwidth costs money, and the more you use the more money you spend. With some hosting services, especially the free ones, your site won’t work if you exceed your monthly quota of bandwidth.

Lets put this in real terms. Say you have a moderately popular site, about 1000 page views a day, quite achievable really. What would you save in our above example?

48.35mb/month

That’s for one image! One! And a small one at that. Think about how many images, GIF images, there are on most web pages. Only 21 similar images would be needed to make that over 1gb of bandwidth savings a month!

Suggestions For Everyone.

Simply put… switch over to using PNG files in your work. It’s better for you, your client, and the future of the web. However, due to Photoshop’s awful support I have some recommendations for saving to PNG.

1. In PhotoShop - Save As Another Format First. If you already have saved out as GIF then this isn’t a problem, just open up the files and save them as PNG using Save For Web. This gets rid of the confused colour information side effect that PS shows. Important – when you load the files back in make sure you set the mode to RGB not Indexed or this will again cause problems. This isn’t a problem if you haven’t saved to a palette image format like GIF, I used 24bit Bitmaps for the second PhotoShop test.
2. Use PNGOut On Your PNG Files. Or use PNG Gauntlet to help you. PNGOut performed excellently on all files, and even compressed the excellent Web Image Guru test image. Simply the best utility I’ve found for PNG compression.

As another recommendation I would suggest using the excellent Web Image Guru, while PNGOut still managed to compress its PNG files the starting standard was excellent, and in combination with PNGOut it produced the best file size overall. Also, as it is not just a PhotoShop plug-in, you can batch covert whole directories of GIFs - or other image formats - over to PNG or anything else that catches your fancy. At $39 it’s a excellent investment.

To Finish.

Well.. that was a bit longer than usual wasn’t it?

I hope that I’ve successfully proven that PNG is a practical and economical replacement for the creaky old GIF format. I didn’t even cover in much depth its additional features that will eventually help everyone make more attractive web pages, and yet I think it is apparent that it is already the superior format.

Here’s to seeing more PNGs in web pages, faster loading times, and lower costs. I think we can all look forward to that.

If you would like to know more about the png format, check out this comprehensive guide at libpng.org