Progressively Enhanced PNG8 image
Jan/100
What is a Progressively Enhanced PNG8 image?
As against the popular belief that PNG8 images can only offer GIF like transparency i.e. pixels are either solid or completely transparent and never partially see-through… PNG8 images can be semi-transparent when saved as progressively enhanced. This has some great benefits:
- File size is much smaller in comparison to PNG24
- No ugly CSS or JS hacks are required to maintain image transparency
- Site maintenance cost is lower as there are no hacks or double images involved to maintain the layout
The only trade-off is that users with browser versions IE6 and below will see a slightly different version of the image… which in most cases would not be even noticeable or pretty acceptable.
How is it displayed in different browsers?
Similar to PNG24 in modern browsers like Firefox, Chrome, IE7 etc. Images with semi-transparent pixels will be displayed transparent in browser versions IE6 and below.
Below is a screenshot of how different PNG versions are displayed in IE6.
How to create a Progressively Enhanced PNG8 image?
Unfortunately this cannot be done in Photoshop but it is easy to create one in Adobe Fireworks. Here are the steps:
- Open your PNG24 image in Adobe fireworks (or create one in it)
- Select Optimize palette change the image type to PNG8 and select the transparency to Alpha Transparency
- Click Rebuild
- Export and save the image (File->Export)
- Done!!
References:
Image Optimization for Web in Photoshop
Jul/090
This article on UxBooth describes various images formats that can be used for the web. If you are looking for a basic understanding of which formats (GIF, JPEG, PNG – 8bit or 24bit) to use when… this is a good resource.
Here is a blurb from the article…
We’ve spoken at length about minimizing load time for faster user experiences and why it’s important to do so, and today I’m going to shed some light on how to optimize images in Photoshop for better web performance.
Keeping image size to a minimum is an important part of keeping your sites visual weight low. By understanding a bit about image compression, and how to optimize images for web, it’s possible to significantly cut down on image size while improving image quality.