PNG Solutions for Web
PNG-24 is what most web developer’s use for transparency on the web. It tends to have large file sizes but provides excellent transparency. Using PNG-8 or GIF for transparency doesn’t work near as well… at least normally! There is actually a way to use PNG-8 transparency that is better than PNG-24.
Some benefits are that most of the time it results in smaller file sizes. PNG-24’s are huge culprits of being massive and being a real pain for visitors with a slow internet connection. As well as this, PNG-8 Alpha Transparency actually renders decent in IE6, so no need for those css/javascript hacks to get it to look right.
The trick involved here is that you cannot simply use Photoshop. You have to use Fireworks to create the effect needed. View the screencast above to get shown exactly how to do this!
Now, if you are new to Fireworks (like me), the workflow is a bit different than Photoshop. Let’s start by opening up our PNG-24 image saved out of Photoshop, and switching to the export Preview view.
The Export Preview is essentially the same thing as Photoshop’s Save for Web tool. Look over to the right in the above graphic at the Optimize and Align panel – those are the settings it’s using. Let’s update that to PNG-8, and the Alpha Transparency option.
Fireworks to the rescue:
- Open your big Photoshop-exported PNG-24 with nice alpha transparency in Fireworks.
- Change the file format to PNG-8.
- Change the transparency option to “alpha transparency”
- Rebuild and export your PNG-8
- Revel in the MUCH smaller file size
Like this:
