Alles over het transparante png-bestandsformaat

Het Portable Network Graphics is een grafisch bestandsformaat dat veel op het web gebruikt wordt. Lossless, waarin afbeeldingen zonder verlies van kwaliteit gecomprimeerd kunnen worden. Een opvallende eigenschap van png is dat het bestandsformaat transparantie ondersteunt. Wat zijn de voor- en nadelen?

Png is bedacht als tegenhanger voor gif toen in 1995 bleek dat de op gebruikte lzw-compressie een patent rustte waardoor er niet zomaar software gemaakt kon worden om gif-bestanden te bewerken en op te slaan. Tegenwoordig is dat patent overigens verlopen. Daarnaast had (en heeft) het gif-formaat de beperking dat er slechts 256 kleuren tegelijkertijd gebruik kunnen worden.

Er was dus behoefte aan een bestandsformaat dat gif kon vervangen én verbeteren. In 1996 werd versie 1.0 van de png-specificatie uitgebracht, die later dat jaar omarmt werd door de W3C, de organisatie achter webstandaarden. In 2003 werd png een heuse ISO/IEC-standaard onder nummer 15948:2003. Alle versies van png (1.0, 1.1, 1.2 en de ISO/IEC-versie die vrijwel gelijk is aan 1.2) zijn achter- en voorwaarts compatibel met elkaar.

Verliesloze compressie

Qua compressie kun je grafische bestandsformaten onderverdelen in twee soorten: lossless en lossy formaten. Bij lossy bestandsformaten wordt er compressie toegepast om de afbeelding kleiner te maken die de kwaliteit van het origineel verslechterd. Het bekendste lossy grafische bestandsformaat is jpg, op audiogebied is mp3 een voorbeeld van een lossy bestandsformaat. Iedere keer als je de afbeelding opnieuw opslaat, wordt de kwaliteit slechter.

Daar staan de lossless formaten tegenover: ook al wordt er gebruik gemaakt van compressie, de afbeelding blijft toch net zo goed als het origineel en kun je opnieuw opslaan zonder kwaliteitsverlies. Png maakt gebruik van het Deflate-compressiealgoritme dat het compressiealgoritme LZ7Z en de Huffman-codering als basis gebruikt. Deflate lig ook aan de basis van het zip-bestandsformaat. Een png-afbeelding wordt dan ook als het ware ingepakt bij het opslaan en weer uitgepakt als de afbeelding wordt weergegeven.

Voordat het bestand wordt ingepakt met Deflate wordt de afbeelding voorbereid voor optimale compressie via een filter. Het filter gebruikt rgb-waardes van aanliggende pixels voor het voorspellen van de waarde van een pixel. Het verschil tussen deze voorspelling en de werkelijke waarde wordt opgeslagen. Dit kan op verschillende manieren waarbij de pixel links of boven als basis gebruikt wordt. Sommige afbeeldingen met weinig kleur zijn nog kleiner te maken, omdat png net als gif gebruikt kan worden in combinatie met een kleurenpalet van 256 kleuren (8 bit) geselecteerd uit alle beschikbare kleuren ook wel png-8 genoemd. Het is echter ook mogelijk om net als in jpg 16,7 miljoen kleuren tegelijkertijd te gebruiken (24 bit), ook wel png-24 genoemd.

Als lossless compressie een afbeelding gecomprimeerd kan opslaan zonder verlies, waarom zijn er dan nog lossy bestandsformaten als jpg? Het antwoord is dat jpg afbeeldingen nog kleiner kan maken zonder dat er direct kwaliteitsverlies zíchtbaar is. Dat geldt vooral voor foto’s die doorgaans geen heel harde contrasten of kleurvlakken in dezelfde kleur hebben. Een foto opgeslagen als png kan wel vier keer zo groot zijn als dezelfde foto opgeslagen als jpg. Png is juist handig voor afbeeldingen die bestaan uit vlakken van dezelfde kleur en harde overgangen zoals grafieken en tekst. Een png-bestand wordt dan juist kleiner dan een jpg-bestand en ziet er ook nog eens beter uit. Kortom: beide soorten bestandsformaten hebben bestaansrecht.

Transparantie

Net als het bestandsformaat gif waar png een vervanger voor is, ondersteunt png transparantie. Hierbij is een gedeelte van een afbeelding doorzichtig en de achtergrond is zichtbaar. De doorzichtigheid is geavanceerder dan bij gif. Bij gif wordt één kleur in het palet van 256 kleuren gebruikt als transparantie waardoor pixels enkel geheel transparant kunnen zijn en dus niet heel fraai in de achtergrond kunnen overlopen. Bij png wordt ook gedeeltelijke transparantie ondersteunt en dit is mogelijk bij iedere pixel in de afbeelding dankzij een transparantie- of alfawaarde. Hierdoor kunnen afbeeldingen gemaakt worden waarbij de achtergrond licht door de afbeelding heen schijnt. Zo zijn onder andere vloeiendere overgangen en schaduwen mogelijk.

Animatie

Tegenwoordig staat gif vooral bekend om zijn animatie-ondersteuning, een korte animatie op het web wordt vrijwel altijd een gifje genoemd. Hoewel png bedoeld was als vervanger voor png, werd animatie niet geïmplementeerd (met ‘verwarring’ als één van de redenen). Want was een gif-afbeelding nu echt als afbeelding bedoeld of vooral als niet getoonde animatie?

Toch zijn geanimeerde png’s tegenwoordig wél mogelijk. In 2001 werd door de ontwikkelaars van png het formaat Multiple-image Network Graphics of mng bedacht. Een variant van png voor animaties. Mng is echter niet compatibel met decoders voor png en is nooit een succes geworden. In 2008 bedacht Mozilla het formaat Animated Portable Network Graphics (apng) bestandsformaat, een uitbreiding op png. Apng is net als mng gebaseerd op png, maar heeft als grote voordeel dat png-decoders die niet met het formaat om kunnen gaan in ieder geval het eerste frame van de animatie als png-afbeelding weergeven.

De browsers Chrome, Firefox, Opera en Safari kunnen apng wel geanimeerd weergeven, terwijl Internet Explorer en Edge dit niet kunnen en dus enkel het eerste frame als plaatje tonen. Hoewel apng goed ondersteund wordt, is het officieel geen onderdeel van de png-specificaties, waardoor een geanimeerde png officieel dus niet bestaat.

Toekomst van png

Png is uitontwikkeld en samen met jpg tegenwoordig het meestgebruikte grafische bestandsformaat is, waarbij het van de afbeelding afhangt welk formaat de voorkeur heeft. Er zijn verder geen plannen voor een volgende versie. Wellicht ligt de toekomst in een totaal ander bestandsformaat dat de eigenschappen van lossless en lossy bestandsformaten combineert.

Google heeft bijvoorbeeld webp bedacht, dat zowel lossy als lossless compressie ondersteunt. Verder is webp geschikt voor transparantie en animatie waardoor in potentie alle afbeeldingen in webp opgeslagen kunnen worden. Het grote probleem is de ondersteuning, want webp wordt enkel ondersteund in Chrome, Opera en Pale Moon. Google gebruikt webp-afbeeldingen in de Play Store als je daar met bijvoorbeeld Chrome heengaat. Gebruik je een andere browser, dan worden png-afbeeldingen getoond.

Deel dit artikel
Voeg toe aan favorieten
ID.nl logo

ID.nl, onderdeel van Reshift BV, is in 2022 gestart en uitgegroeid tot de meest toonaangevende en complete consumentensite van Nederland. Het doel van ID.nl is om de consument te helpen met alle technologie die hoort bij het dagelijks leven: van smart-health-meters tot e-bikes, van warmtepompen tot zonnepanelen - en alles daar tussenin!

Duidelijk, betrouwbaar en onafhankelijk: ID.nl maakt moeilijke dingen makkelijk.

Contact

ID.nl

Nijverheidsweg 18

2031 CP Haarlem

info@id.nl

Telefoon: 023-5430000