Overview of the 3 image formats on the web and solving the problems of PNG usage.
Overview
When talking about image formats on the web its all about using the right tool for the job. Fortunately there are few tools to choose from.
Gif
- Benefit: Work well with flat coloured images
- Benefit and downside:They have transparency but only partial function of it
- Downside: They only support 256 colours
Uses - with PNG theres now little reason to use the gif format, it's deprecated.
JPG:
- Benefit: Can hold 16 million colours
- Benefit: Compresses well into quick loading file sizes
- Downside: No transparency
- Downside: Distorted images which have flat colours
Use – photography type imagery.
PNG:
- Benefit: Crisp images with flat colours
- Benefit: Full alpha transparency
- Downside: Large file sizes
Uses – logo type imagery.
There are two main problems with png images on the web:
- As mentioned – large file sizes
- Browser support – specifically IE6 doesn't not support it natively
2 tips in reducing PNG file sizes
Posterize
This reduces the number of colours in the image therefore reducing file size.
Two kinds of PNG
PNG-8 : supports partial transparency, so its either on of off, its an all or nothing case. A single pixel is either transparent or not. Limited to 256 colours. The PNG-8 fornat is very similar to a transparent gif but png is preferred as it compresses to lower file sizes.
PNG-24 : allows a full alpha channel which allows for use of transparency. Pixels can be between full colour and opaque. This allows pngs to layer on websites without background images lineing up, which was the way it used to be done before png's were introduced.
Use the posterize adjustment layer within photoshop CS4
This reduces the number of colours in the image therefore reducing file size.
In the layers palette choose, adjustment layer then 4th from the bottom posterize. A dialog box appears named levels which allows you to set a figure. The higher the number the more the number of colours. Choose as low as number os possible by gauging visaully with the quality of the image.
Using third party software such as PNG Genie.
Third party applications such as Pngenie remove information from the image without affecting quality. There are numerous other applications available for both Windows and MacOX.
In the experiments with these techniques we have gone from the original size of 41k kb to 29kb. Thats a saving of over 30% without spending a huge amount of time optimising the images. You could spend many hours and even days experimenting with different techniques but you hvw to be pragmatic and use time wisely. These two techniques not only quick to do but ar very effective.
The second problem with PNGs is that Internet Explorer 6 ( IE6) does not natively support full alpha transparency with PNG images.
This can be solved by using a javascript solution such as DD belated. There are also a few jQuery add ons but iv found DD to work in most situations where others have failed.
The DD belated can be easily implemented on a site. The first thing you need to do is download the javascript file the Diller Design site.
The second is to include the code found on the Diller Design site in the head section of your HTML document.
As the solution is javascript, it wont work if the user has javascript turned off. A wide variety of stats suggest that over 95% of users have it turned on, but still leaves a small percentage who will not be able to use this solution. Fortunately, the strength of using javascript in this situation is increased as many other sites will not work with javascript and the user should be used to seeing discrepancies on sites.
Other Episodes::
