Using .png images in a website?

Question

Being new'ish to Fireworks and the .png format I am really amazed at the quality of png's in a webpage and how the hold their quality. In web design I tend to like placing text over images and this can often have quality issues as text tends not to work to well with a jpeg unless you increase the resolution before hand.
I have found that while I edit an image in FW and place text over an image if I then save as a jpeg the image may not be as clear as I would like, if I keep it as a .png the quality is perfect.
I know why this is but on doing some research have found that .png's are still not universally used across may web browsers and as a result it is advised not to use them.
Some forums say they are fine while others say the opposite in using 'png's in web design, does anyone have any thoughts on this?
I want to use .png's in my web design instead of jpegs but am undecided from what I read on the Internet so would appreciate any thoughts you may have regarding this.
Many thanks, Pete.

Answer 1

On PNG images:
When you "save" from Fireworks, the file contains extra information in the file header which is proprietary to FW. The file will be viewable in a browser, as browsers just ignore the extra information, but the file is larger than is needed for a Web page. To create a .png file for a browser, you want to "export." (I like using the Image Preview function, myself.) There is no difference in the file extension between a fully-editable FW document .png and a flattened exported .png. In a thread some time ago, a poster commented that he gave his Fireworks documents a .fw.png extension, and exported to the plain .png. I've tried to adopt that approach and I find it helps me keep better track of what's what in my folders. It's up to me to remember to do it, though.
Exported PNG images can be 32-bit, 24-bit or 8-bit. Here's the difference:
A 32-bit PNG will represent your FW document with transparency. All the objects will be flattened, of course, but transparent and partially transparent areas will be preserved. The file is 32-bit as you have 8-bits each for red, green, blue, and transparency. Eight bits of data gives you 256 values. (Note: Photoshop calls this a version of the format a 24-bit PNG with transparency.)
A 24-bit PNG does not have transparency. The 24 bits of data are 8-bits (256 values) for red, green, and blue. In this sense, it is similar to a JPEG, although you do not have the data loss or the color shifts.
An 8-bit PNG has 256 colors in a list. In a way, this is similar to a GIF image. The interesting thing about PNG8, however, is that colors in PNG8 in Fireworks can be semi-transparent. In a GIF, you have the option of selecting only one color to be fully transparent.
Using PNG images on the Web
You will want to export to PNG32, PNG24, or PNG8, as appropriate for your needs. Do not overwrite your Fireworks document! If you use Image Preview when exporting slices, and select a .png format, then that setting will be set for that slice. You can't select .png from the Property Inspector.
If you need to support Internet Explorer 6, you can use PNG24 with no problem. IE6 will render any semi-transparent areas of PNG32 or PNG8 images as fully transparent. To support PNG32 in your Web pages on IE6, you need to add special code. Even then, however, your visitors' browsers can lock up under circumstances that are not fully understood (http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html). If you know your visitors won't be using IE6, or the content in the transparent PNGs is purely decorative, then maybe that's not an issue for you.
Here's a roundup of techniques for using transparent PNGs at Smashing Magazine:
http://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-desig n/
File Size
Choose the best file type for the image you have. No one file type is always better. If you need to support IE6 still, and you can think of how to do your site without transparent PNGs, then the coding will be easier and the cross-browser compatibility will be better. If you use Image Preview (under the File menu item), you can change the quality level for JPEGs. The default level is 80%, which may not be a high enough quality level for a particular image. Higher quality means larger image size, but for photographic elements, a JPEG may still be smaller than a PNG for a given visual quality. It depends on the image content; each image is different.
Gradients and Banding
Fireworks creates strict numerical interpolations between the two colors you use for your gradients. If the colors are close together, you may not have enough intermediate colors to span the distance you want to cover and you will get bands. Photoshop produces what appear to be smoother gradients, because that application adds subtle noise into the gradient to prevent banding.
Indexed Palettes
If your image contains more than 256 colors and you select an image format with an indexed palette (GIF or PNG8), you may find that Fireworks produces a palette with fewer than 256 colors. This is a known "feature" of the program and there's no known workaround. If you decide to produce transparent PNG8 images, you need to be aware that this can happen.
And...that's all I can think of that touches on your issues.