Je leest:

Plaatjes op internet

Plaatjes op internet

Auteur: | 1 april 1997

Grote kans dat je er honderden van op je pc hebt staan, misschien ook wel op je mobiele telefoon: digitale foto’s! Met sites als Hyves, Facebook, Flickr zijn ze nu de normaalste zaak van de wereld, maar achter de schermen zit heel wat techniek. Wat zijn dat nou precies, plaatjes op internet?

Zomervakantie met je vrienden. Eén groot feest van zon, zee en strand, en met de digitale camera’s en mobieltjes van tegenwoordig kun je er thuis nogmaals van genieten. Alleen is de fotocollectie wel wat verspreid doordat iedereen z’n eigen camera heeft. Geen punt! Even uploaden naar Hyves, Facebook of Flickr en iedereen heeft zo de complete collectie op z’n computer staan.

Flickr is een populaire foto-site. Iedereen (met een account) kan foto’s uploaden en die delen met z’n vrienden, of de rest van de wereld!

Voor de gebruiker is het een kwestie van een paar keer klikken, maar er komt vanbinnen heel wat kijken bij zo’n digitale foto. Hoe komt het nou dat wij een mooi plaatje op het scherm zien: wat zit daar achter?

Grafische formaten

De plaatjes die je ziet op internet zijn gewone computerbestanden. Wanneer je deze bestanden bekijkt, dan zie je heel vaak dat de namen eindigen op .jpg_,.gif_,.bmp of .eps. Elke afkorting correspondeert met een grafisch formaat, dat is een manier om een plaatje als computerbestand op te slaan. De wereld van grafische formaten bestaat uit tientallen drieletter afkortingen. Waarom zijn er zoveel verschillende grafische formaten? Wel, bij digitale opslag van plaatjes zijn de volgende thema’s belangrijk:

  1. Hoe goed is de kwaliteit van de plaatjes? Met name bij foto’s en films is dit erg belangrijk.
  2. Hoe gemakkelijk kun je een plaatje bewerken? Denk aan het vergroten en verkleinen of het bewerken van foto’s.
  3. Kun je de grafische bestanden wel op alle computers en printers gebruiken? Kun je ze in tekstverwerkers en webbrowsers gebruiken?
  4. De grootte van de grafische bestanden.

De reden van het bestaan van zo veel grafische formaten is dat ze op elk van bovenstaande thema’s verschillende nadruk leggen. De twee meest gebruikte grafische formaten zijn GIF en JPEG. Plaatjes in deze formaten kunnen door alle webbrowsers verwerkt worden.

Als formule of per vakje

In eerste instantie onderscheiden we twee soorten van digitale opslag van grafische informatie: vector-grafiek en bitmaps.

Wanneer het plaatje als vector-grafiek wordt opgeslagen, dan wordt elk object beschreven door een wiskundige formule. Je kunt zo’n afbeelding heel gemakkelijk manipuleren, denk aan vergroten of verkleinen, en aan transleren, roteren en spiegelen. Een voorbeeld van vector-grafiek is PostScript (.ps en .eps). Met onderstaande vier regels uit een PostScript bestand tekenen we een cirkel met middelpunt (300,500) en straal 100 (de passer wordt over de volle 360 graden rondgedraaid).

%!PS 300 500 translate 0 0 100 0 360 arc stroke showpage

Een afbeelding kan ook als bitmap opgeslagen worden, het wordt dan gezien als een ruitjespapier waarvan de hokjes ingekleurd zijn. Bitmaps (.bmp) zijn vooral bedoeld voor schermafdrukken en foto’s wanneer geen wiskundige formules voorhanden zijn die de plaatjes beschrijven. Nadeel is dat veel meer informatie opgeslagen moet worden en dat het niet gemakkelijk is om zonder kwaliteitsverlies de plaatjes te manipuleren. Daarnaast is het formaat erg gebonden aan de gebruikte apparatuur en software.

Bij een bitmap wordt van elk beeldpunt (pixel) op het plaatje aangegeven wat de kleur is. Hieronder zie je een foto met daarnaast een uitvergroting van een klein gedeelte. De bitmap van dit plaatje bestaat uit een reeks van kleurcodes, één voor elk van de pixels. Symbolisch (w=wit, g=grijs) is dat: w, w, w, g, g, w, w, w, w, w, g, w, w, g, enzovoort.

Een plaatje bestaat uit een heleboel beeldpunten, ook wel pixels genoemd. Wanneer een plaatje als bitmap is opgeslagen, worden alle pixels vastgelegd en kan het voorkomen dat je bij het inzoomen de afzonderlijke vakjes weer ziet. Dat kan niet gebeuren als je de afbeelding als vector opslaat, want dan worden de pixels tijdens het inzoomen steeds opnieuw berekend.
Marije Nieuwenhuizen

Laten we eens rekenen aan de grootte van een bitmap. Stel dat we een plaatje hebben met afmeting 1280 bij 1024 (standaard grootte van een 19 inch beeldscherm) en dat de kleur van elk pixel met 24 bits (= 3 bytes) wordt aangegeven. Het plaatje neemt dan 1280 × 1024 × 3 bytes in beslag, afgerond 3932160 bytes in beslag, afgerond 4 MB. Heb je op je computer internet met een downloadsnelheid van 9 Mbps (gemiddelde snelheid in Nederland in 2009), dan duurt het laden zo’n drieënhalve seconde, want 9 Mb = 1,125 MB (let op de hoofdletter!).

Beeldcompressie

Er wordt veel aandacht besteed aan enerzijds snelle netwerkverbindingen en anderzijds aan slimme manieren om de grafische informatie compacter op te slaan. Deze tak van sport staat bekend onder de naam datacompressie, en meer specifiek beeldcompressie. We onderscheiden twee soorten van beeldcompressie: met of zonder verlies aan informatie. In het eerste geval is volledige reconstructie van het origineel mogelijk, maar is de compressiefactor laag (het bestand blijft relatief groot). In het tweede geval is kwaliteitsverlies wel toegestaan. Dan kunnen bestanden veel kleiner van omvang worden; 15 tot 25 zo klein is geen uitzondering.

Hoe kun je een bitmap comprimeren? De eenvoudigste manier is om in de bitmap het rooster van linksboven naar rechtsonder af te lopen en alleen te registreren wanneer de kleur van een pixel verandert. Er van uitgaand dat de kleur van een pixel vaak gelijk is aan de keur van de buurman, levert dit een winst in opslagruimte op (zie voorbeeld hieronder).

De gecomprimeerde versie van de deze bitmap bevat de volgende data: 3w, 2g, 5w, g, 2w, g, 3w, g, 4w, g, w, g, 6w, 2g, 6w, g, w, g, 4w, g, 3w, g, 2w, g, 5w, 2g, 3w. Hierbij duidt 3w drie opeenvolgende witte hokjes aan, 2g twee opeenvolgende grijze blokjes, enzovoort. In totaal moet er 27 gegevens worden opgeslagen: telkens een getal (het aantal opeenvolgende gelijke pixels) en een kleur (welke kleur hebben die pixels?). Aangenomen dat een getal 1 byte in beslag neemt en een kleur 3 bytes, dan is de gecomprimeerde bitmap (27 × 4 =) 108 bytes groot. De originele bitmap heeft 64 pixels, waarvan we de kleur bijhouden. Deze is dus (64 × 3 =) 132 bytes groot. Comprimeren levert hier winst van ongeveer 25% op.

Compressie op internet

De twee manieren van compressie die het meest gangbaar zijn voor de plaatjes die je op internet vindt, zijn GIF en JPEG. Het eerste type, voluit Graphics Interchange Format is sinds de jaren ’80 erg populair. Het is een grafisch formaat dat de Lempel-Ziv-Welch compressie-methode gebruikt. In deze methode worden patronen in het plaatje geidentificeerd en opgeslagen in een tabel.

Als een patroon zich herhaalt in het plaatje wordt alleen het indexnummer van het desbetreffende patroon opgeslagen in het gecomprimeerde bestand. Wanneer de informatie van een GIF bestand weer uitgepakt wordt, dan worden de indexnummers vervangen door de originele patronen uit de tabel. Bijvoorbeeld, de bitmap uit het eerder gegeven voorbeeld is opgebouwd uit 3 verschillende patronen van [2 × 2]-pixels. In gecomprimeerde vorm hoeven we dus slechts deze drie patronen op te slaan.

Bij JPEG compressie gaat het om het verkleinen van de grootte van bestanden met natuurlijke, kleurrijke beelden (foto’s bijvoorbeeld) zonder dat het blote oog verschil met de originelen waarneemt. Hiervoor is een bonte mengeling van kennis van de fysiologie van het oog, van optica, en van de psychologie van zintuiglijke waarneming gebruikt. Wiskunde wordt gebruikt om de tranformaties tussen gecomprimeerde en gedecomprimeerde vorm in goede banen te leiden.

Flickr: Martin Howard

Ga eens met je neus op de beeldbuis van een ouderwetse kleurentelevisie zitten: je ziet dan dat het scherm helemaal bestaat uit blokjes van de kleur rood, groen en blauw (zie afbeelding). De meeste grafische formaten gebruiken alleen deze drie kleuren in verschillende gradaties om een pixel in te kleuren. Dit heet het RGB-kleurenmodel (Red, Green, Blue).

In JPEG worden voor het comprimeren de RGB-waarden vertaald naar het HSV-model dat drie andere waarden gebruikt, namelijk Hue (kleurwaarde), Saturation (verzadiging) en Value (intensiteit of helderheid). Die waarden worden elk op een andere manier ‘behandeld’ tijdens het comprimeren. Het is bijvoorbeeld een ervaringsfeit dat voor mensen helderheid een grotere rol speelt in waarnemingen dan kleurschakering of verzadiging. Bij JPEG-compressie wordt daarom de helderheid beter behouden dan de andere twee HSV-waarden.

Lees meer op Kennislink over beeldverwerking en datacompressie:

Oeps: Onbekende tag `feed’ met attributen {"url"=>"https://www.nemokennislink.nl/kernwoorden/beeldverwerking/datacompressie/index.atom?m=of", “max”=>"7", “detail”=>"minder"}

Dit artikel is een publicatie van Pythagoras (KWG).
© Pythagoras (KWG), alle rechten voorbehouden
Dit artikel publiceerde NEMO Kennislink op 01 april 1997

Discussieer mee

0

Vragen, opmerkingen of bijdragen over dit artikel of het onderwerp? Neem deel aan de discussie.

NEMO Kennislink nieuwsbrief
Ontvang elke week onze nieuwsbrief met het laatste nieuws uit de wetenschap.