If you are using PNGs on your site straight from Photoshop, then this post may be of interest to you. The PNG image format offers some unique abilities for web designers, but there are pitfalls concerning compression, colour accuracy and browser compatibility. This article explains the issues, and presents some easy-to-implement solutions.
What is PNG?
PNG (Portable Network Graphic, pronounced ‘Ping’) is a bitmapped image format that can be displayed in a web browser. The format was developed by the PNG Development Group (who perversely may be in the running for the worst looking website out there…) and is defined by the PNG Specification.
Version 1.0 of the specification was written by Thomas Boutell and Tom Lane and released as a W3C recommendation all the way back in 1996, when the web was only five years old. The most recent update, 1.2, was released in 2003, reminding us of how quickly the W3C cogs turn…
The flexibility of the format has meant that today PNGs can be found in a variety of places, including operating system and mobile phone user interface graphics. For web design, it has a number of benefits over JPEGs and GIFs, most notably that is uses lossless compression (meaning that image data is not permanently removed or altered when compression is applied, resulting in an image quality identical to the original), and that it can include an alpha channel allowing for semi-transparent pixels. It can also use an advanced form of progressive downloading, and provide gamma correction to ensure colour brightness is accurate across platforms (more on this later).
It does not, however, support animation like the GIF format (still in use today as those spinning ‘preloader’ icons you often see in JavaScript/Ajax applications), nor is it able to reduce file sizes to quite the extent that the lossy JPEG algorithms can.
Sounds Great! So Why Isn’t It More Popular?
Even though the format has existed nearly as long as the web itself, PNG has only enjoyed widespread browser support over the past couple of years. Prior to the release of Internet Explorer 7 in 2006, IE offered limited PNG support. At the time, IE6 dominated the market, making the widespread use of PNG undesirable for designers. From this date, it has taken considerable time for IE6′s majority to wane. Even today, depending on which sources you read, Internet Explorer 6 still maintains between 9% and 18% of the market. This can be confirmed by a report by StatOwl that states that 12% of browsers in use today do not have proper PNG support. Although this doesn’t seem a vast percentage, it would still represent an average of 120 visitors out 1000. No good if you are trying to sell these people something!
In addition to this (and perhaps because of it), Photoshop has always had limited PNG export functionality and this doesn’t look set to improve in CS5. So if we want to use PNGs on our websites effectively, how do we best go about it?
Photoshop and PNG
Photoshop has some notable PNG export issues, the three main ones being:
- It doesn’t employ some of the more advanced available methods to compress images effectively.
- It includes by default extraneous meta data such as colour profiles, and the fact that Photoshop generated the file!
- Colours can appear to look different when compared with colours declared with CSS, even if they have identical RGB or hex values. This is problematic if you want your image to match up with a background colour, for instance. This is to do with PNG gamma-correction data being interpreted inconsistently by browsers. A good explanation of this is provided here. Versions CS3+ stopped writing the gAMA chunk into the PNG, so this is only an issue if you are using Photoshop CS2 or below.
Fireworks does a much better job of working with PNGs, and has additional tools for working with alpha transparency, but Photoshop is the tool of choice for most web designers. We will look below at a quick way of whipping a Photoshop PNG into shape.
Photoshop Solution – OptiPNG
An open source project called OptiPNG can be used to fix the issues presented by Photoshop. It employs additional lossless compression algorithms, and strips out all unnecessary data, including the offending gAMA chunk, if present. The home page for the project includes the application source code for you to compile yourself, or a Windows executable version. For Mac users, there are three free pre-made GUI front-ends already available for you to use, there is also an alternative Windows front-end called Opti-PNG-UI. Linux users are left high and dry I’m afraid (feel free to correct me in the comments if this is not the case).
Being a Mac user, I’ve done a little test on the three applications to see how they compare
This is what I’ve been using for the past few years. It hasn’t been updated for while, and although it seems to work fine in OSX 10.5 (Leopard), I don’t know how well it will fare in 10.6 (Snow Leopard). Implementation is simple – you simply drag and drop your PNG onto the application icon and it runs it through OptiPNG. There are no controls or preferences, and once the process is complete, the original file is overwritten with the optimised one. You can get it to work with multiple files simultaneously (just drag them in at the same time), although it may not like it if you try too many at once. I tend to keep it in the dock for easy drag-and-drop access.
This works in exactly the same way and produces identical results to PNGCrusher, only it’s icon doesn’t look as nice. It has been updated more recently however, so if you are on Snow Leopard and PNGCrusher isn’t working, then maybe this will work instead.
This is a slightly more complex application with some preference controls and a queueing window. You can try applying compression more than once, and sometimes this does work. It also applies not just OptiPNG but three other lossless compression methods to your PNG. One of them – PNGOUT has to be downloaded separately due to licencing restrictions (incidentally PNGOUT is available within a Plug-in for Photoshop – but this costs $30 for a commercial version, whereas ImageOptim is free). Out of interest, I tried ImageOptim with and without PNGOUT to see if it made much difference.
Test Results:
- Original PSD: 99K (101,641 bytes)
- PNG from Photoshop’s ‘Save for Web’ feature: 11K (11,296 bytes)
- PNGCRUSH: 10.5K (10807 bytes)
- Squeezer: 10.5K (10807 bytes)
- ImageOptim: 9.7K (9908 bytes)
- ImageOptim+PNGOUT: 9.4K (9606 bytes)
As you can see ImageOptim produced the best results, and PNGOUT did make a slight difference.
Now a saving of 1-2K may not seem worth the extra effort, but remember that this is a relatively small image. Those extra bytes represent an actual file size reduction of 15%. If applied across an entire site, this will make a significant difference, especially considering that Google is now ranking webpages based on their load times.
Remember that any gamma-correction issues have now also been solved.
You get much better results with certain types of images. I tried the process on in few different scenarios and one example resulted in a 74% reduction over the Photoshop PNG!
IE6 and PNG.
PNGs will display in IE6, and if they are completely opaque there is no issue. The problem arises when alpha-transparency is required. Transparent or semi-transparent pixels are displayed as a solid blue-grey colour:
The image above shows a sample PNG with alpha-transparent pixels against a white background. The left image shows how it is rendered in IE6, the right image shows it in FireFox 3. Note the grey-blue box around the image in IE6.
As mentioned earlier, Fireworks gives us additional tools to work with transparency, and allows us to create an 8-bit colour-indexed PNG that can include varying levels of transparency that work with IE6. The process is fiddly to work with though, and the format limits the image’s palette to 256 colours, which is isn’t great. So if we want to keep our workflow simple and within Photoshop what other options are there?
Most web designers are aware of fixes that employ Microsoft’s proprietary CSS alphaImageLoader ‘filter’ to force recognition of the alpha channel. These are fraught with problems however, due to the way that the filter effect is implemented. It essentially redraws the image on a new layer that blocks the users cursor from accessing neighbouring interactive elements, preventing hyperlinks and form elements from being clickable. It also doesn’t allow you to position or repeat images if they are being used as a CSS background. The TwinHelix, SuperSleight, IE7.js and UnitPNG fixes all use this method.
Many developers these days choose to ignore IE6, and so aren’t worried about any of this. My view is that this is slightly lazy. There is a quick and easy fix, without much overhead, which we will look at below.
IE6 Solution – DD_BelatedPNG.
This method requires the inclusion of a small JavaScript file to employ some clever wizardry and make IE6 recognise the PNG alpha channel data. The script, by Drew Diller, is ingenious in that it uses another Microsoft proprietary technology – VML (Vector Markup Language) to make the PNG work properly. This avoids any of the drawbacks that occur when using alphaImageLoader. Although it’s only on version 0.0.8a, I’ve used it extensively on a range of projects without any noticable problems. It is also completely unobtrusive, small in size (7K) and very easy to set up:
Quick DD_BelatedPNG Tutorial.
Download the DD_BelatedPNG.js document from Drew’s website.
Place it where you like in your website’s root folder. I generally try to keep all my JavaScript in a root-level directory called ‘scripts’.
Create a new blank JavaScript document called ‘DD_Config.js’ and save this in the same location.
Create a link to both JavaScript files in your HTML enclosed within conditional comments targeting only Internet Explorer 6 using the following code (remembering to change the path if different):
[cc lang="html"]
[/cc]
It is generally considered best practice to place JavaScript at the bottom of your HTML document to speed up page load times. I think in this case it is better to put the links in the document <head> otherwise end users will see the transparency errors in the PNG before the fix is loaded.
Open up the DD_Config.js file and place the following code in it:
[cc lang="javascript"]
DD_belatedPNG.fix(‘#myElement’);
[/cc]
Replace #myElement with CSS selectors for the elements that contain PNGs you want to fix. It will work on both <img> elements and CSS background images. You can chain multiple selectors together by separating them with commas, just as you would do with a normal CSS rule.
Drew suggests just putting the configuration code directly in the HTML rather than placing it in an external file. I prefer this method because not only does it separate out the behaviour from the structure, but it means you can make site-wide selections in a single file, just like you do with CSS.
It is probably best to make your selections fairly targeted. I would imagine that using ‘*’ or ‘img’ or even ‘div’ would give the browser a lot of unnecessary work and will slow down performance.
WordPress
If you use WordPress, there is a nifty plug-in called HIT IE6 PNG Fix which allows you to easily implement a range of PNG fixes, including DD_BelatedPNG, which is the only one I would recommend.
Quick Recap
So, problem-free PNG usage can be had by using the following workflow:
- Save for Web in Photoshop
- Run resulting image through OptiPNG or your OptiPNG GUI of choice
- Include DD_BelatedPNG.js within your template
- Add in the relevant CSS selectors for PNG elements in the DD_Config.js file.
Simple!
Conclusion
In terms of web design today, PNG is the only way of creating semi-transparent effects consistently across all browsers, without having to resort to fiddly browser-specific hacks or fallbacks. CSS3 offers us some more flexible alternatives (RGBa, text-shadow, box-shadow) but it will be a long time before we can use any of these in Internet Explorer. Until then, have a go at experimenting with some PNG see-throughness in your next design!
