I ran through this little Fireworks PNG trick in the Design View this morning and thought it was worth dropping in a blog post too. This is a method that’s been around for years, but I’m constantly surprised by how many people don’t know about it. Even in this office, I’ve had web gurus furrowing their brows and insisting “No, no … that can’t be right … can it?” So, at the risk of having long-time Fireworks users yawn, roll their eyes and think duh!, here it is. As you probably already know, PNG comes in two flavors — 8-bit and 32-bit. It’s the 32-bit version that gets most of the fanfare. PNG32’s major characteristics are:
- It uses a flexible “JPEG-like” RGB color model, rather than a limited palette as GIF does.
- It employs a completely lossless compression method, allowing you to save and resave your image with no loss of quality.
- Lossless compression does come at some cost — PNG images are always much fatter than their JPEG equivalents.
- It can reproduce complex, graded transparency settings, similar to a PSD or TIF file.
- It employs a palette-based color model (sometimes called an indexed palette), like the one that GIF uses.
- It can’t animate like GIF.
- It offers GIF-like 1-bit transparency. Pixels are either solid or completely transparent, but never partially see-through.
Frequently Asked Questions about PNG8
What is the main difference between PNG8 and PNG24?
PNG8 and PNG24 are two different types of PNG (Portable Network Graphics) file formats. The main difference between them lies in the color depth. PNG8 supports 256 colors and includes support for an alpha channel (transparency). On the other hand, PNG24 supports up to 16 million colors, similar to JPEG, and also supports an alpha channel for transparency. This means PNG24 can handle more complex images with a wider range of colors, but the file size will be larger compared to PNG8.
When should I use PNG8 over other formats?
PNG8 is an excellent choice when you need to keep file sizes small, such as for web graphics. It’s particularly useful for simple images, logos, icons, or graphics with a limited color palette. PNG8 also supports transparency, which can be a significant advantage over other formats like JPEG.
Can PNG8 handle transparency?
Yes, PNG8 does support transparency. It can handle one level of partial transparency, which means it can make one color completely transparent. This feature is particularly useful when creating images that need to be placed on different colored backgrounds.
How does PNG8 compare to GIF in terms of quality and file size?
Both PNG8 and GIF support 256 colors and transparency. However, PNG8 generally provides better quality and smaller file sizes compared to GIF. This is because PNG8 uses a more efficient compression algorithm, which results in less loss of quality and smaller file sizes.
What software can I use to save images in PNG8 format?
Most graphic design software, including Adobe Photoshop and Illustrator, support saving images in PNG8 format. When saving an image, you can usually choose the format from a dropdown menu in the ‘Save As’ or ‘Export’ dialog box.
Can I convert a PNG24 image to PNG8 without losing quality?
Converting a PNG24 image to PNG8 will reduce the color depth from 16 million colors to 256 colors. This can result in a loss of image quality, particularly for complex images with a wide range of colors. However, for simpler images, the loss of quality may not be noticeable.
Why does my PNG8 image look pixelated?
If a PNG8 image looks pixelated, it’s likely because the color depth is not sufficient to accurately represent the image. PNG8 only supports 256 colors, so complex images with a wide range of colors may not look as smooth or detailed.
How can I reduce the file size of a PNG8 image?
You can reduce the file size of a PNG8 image by decreasing the color depth or the image dimensions. Most graphic design software allows you to adjust these settings when saving or exporting an image.
Can all web browsers display PNG8 images?
Yes, all modern web browsers can display PNG8 images. However, older browsers may not support the transparency feature of PNG8.
Is PNG8 the best format for all types of web graphics?
While PNG8 is a versatile and efficient format for web graphics, it’s not always the best choice. The best format depends on the specific requirements of the image. For example, for complex images with a wide range of colors, PNG24 or JPEG may be a better choice.
Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.