Semi-transparantie met PNG-8

Voor afbeeldingen met semi-transparantie gebruikte ik altijd PNG-24. Dat heeft twee nadelen: de bestanden zijn groot, en Explorer 6 rendert de transparante delen als een lelijk grijs vlak. Deze week liep ik toevallig tegen een oplossing aan: je kunt afbeeldingen opslaan als PNG-8 mét volledige alpha-transparantie. Deze oplossing is al een paar jaar oud, maar toch lijkt niemand hem te kennen (waaronder ikzelf).

De voordelen: de bestanden zijn minder groot dan bij PNG-24, in Explorer 6 ziet het er heel acceptabel uit, en hacks of scripts zijn niet meer nodig. Het enige nadeel: het opslaan kan alleen in Fireworks.

Semi-transparantie stap voor stap

Open je bestand in Fireworks. Ga naar het Optimize-palet en selecteer PNG 8. Selecteer in het dropdown menu Alpha Transparency. Klik rechtsonder op Rebuild. Je ziet nu het palet voor je PNG. Kies File > Export… en sla je afbeelding op. Dat is alles.

Internet Explorer 6: transparant in plaats van grijs

Explorer 6 snapt normaalgesproken niks van transparantie in PNG’s, en maakt alle transparante delen ondoorzichtig grijs. Met alpha-transparantie worden in Explorer alle semi-transparante delen helemaal transparant. Dat is nog niet helemaal zoals het moet, maar wat mij betreft een prima alternatief.

Hoe werkt het?

In PNG-8 heb je de beschikking over 256 kleuren. Programma’s als Photoshop gebruiken bij het opslaan zogenaamde index-transparency. Dan wordt 1 kleur gereserveerd voor een volledig transparant alpha-kanaal, en alle semi-transparante kleuren worden ondoorzichtig gemaakt en samengevoegd met de achtergrondkleur. In Fireworks kun je nog een andere optie selecteren: alpha-transparency. Daarbij worden in het palet van 256 kleuren meerdere kleuren voor transparantie gereserveerd.

Wanneer kan ik het gebruiken?

Je kunt dit alleen inzetten bij graphics met een beperkt kleurenpalet, omdat je in totaal maar 256 kleuren tot je beschikking hebt. Voor vrijstaande foto’s is het dus niet geschikt. Maar vaak heb je die transparantie alleen maar nodig voor bijvoorbeeld een schaduw elementje, en dan is dit een heel goed alternatief.

Meer info en Screencast

Zelf heb ik mijn informatie uit dit artikel over transparantie in PNG-8. Daar staan ook screenshots van PNG’s in Firefox, Safari, Opera en Explorer 4 t/m 7.
Onderstaande screencast doet het hele proces een keer voor (nee, dat duitse accent is niet van mij). In het begin bespreekt de maker de mogelijkheden voor het gebruik van scripts voor het tonen van PNG’s, maar vanaf 09:22 gaat het over het aanmaken van PNG-8 met alpha-transparantie.