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.
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