TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Projects

PNG Support

The following tests were meant to demonstrate the support levels of PNG-8 and PNG-24 respectively amongst 2003's browsers. These tests have an accompanying write-up.

PNG-8

32 colour GIF, saved from
Photoshop 7, 3609 bytes

32 colour PNG, saved from
Photoshop 7, 4890 bytes

above image on white background

above image on white background

If your browser supports PNG-8 properly, what you should see are two identical coffee cups on a blue background in the top row, and the same two coffee cups on a white background in the bottom row. All images contain a 1-bit transparency channel, the left column being GIF, the right PNG. If your browser displays the bottom right cup with a blue background, or the top right cup with anything but a blue background, then it does not support PNG-8 transparency. If the right column images are missing, then it does not support the PNG format.

List of known browsers that pass the test: IE5+/Win, Mozilla 1.0+/Win, Netscape 6+/Win, Safari Beta v74 (Mac), Netscape 7/Mac, IE 5.2/Mac, Camino 0.7/Mac.

PNG-24

256 colour GIF, saved from
Photoshop 7, 13,969 bytes

True colour PNG, saved from
Photoshop 7, 20,971 bytes

above image on white background

above image on white background

If your browser supports PNG-24 properly, what you should see are two identical coffee cups with drop shadow on a blue background in the top row, and the same two coffee cups on a white background in the bottom row.

You will notice the cups on the left (GIF) dither to blue, leaving a fringe that looks out of place on the white background. This highlights the limitation of single-bit transparency. A pixel can either be completely transparent, or completely opaque. Proper planning is required ahead of time to compensate for any background colours or patterns.

If your browser supports proper PNG-24 alpha transparency, you will see that the images on the right fit properly onto the two backgrounds colours. If not, they will most likely dither to a solid grey background colour. This highlights both the strength of a full 8-bit alpha channel, and the limitations of some of today's browsers.

List of known browsers that pass the test: Mozilla 1.0+/Win, Netscape 6+/Win, Safari Beta v74 (Mac), Netscape 7/Mac, IE 5.2/Mac, Camino 0.7/Mac.