Wat is het verschil tussen Raster en Vector Graphics?

Wat is het verschil tussen Raster en Vector Graphics?

De laatste tijd krijg ik veel vragen over raster- en vector-graphics. Daarom heb ik besloten een beknopte uitleg te schrijven over de belangrijkste kenmerken van beide formaten. Inclusief interactieve animaties om je het belangrijkste verschil zelf te laten ervaren.

Raster-graphics

Raster-graphics, ook wel bitmaps genoemd, kom je overal tegen. De meeste afbeeldingen die je op het internet tegenkomt zijn van dit type en hebben vaak de extensie JPG, PNG, GIF of BMP. Het technische principe achter dit formaat is al zo oud als het bestaan van de PC zelf.

Een afbeelding wordt een raster-bestand door deze op te delen in pixels (beeldpunten) en van deze pixels de kleurinformatie op te slaan. Bij het vertonen van een raster-afbeelding worden deze pixels simpelweg naar het scherm verzonden. De hoeveelheid pixels waarin de afbeelding is opgedeeld, de resolutie, bepaalt de mate van detail, dus scherpte. Hoe meer pixels, des te hoger de kwaliteit. Maar een hogere resolutie komt ook met een prijs, want dit zorgt voor een grotere bestandsgrootte in bytes.

Toepassingen raster-graphics

Vooral foto's, maar ook video's, worden volgens het raster-principe opgeslagen. Een camera kan vrij gemakkelijk inkomend licht omzetten naar losse pixels. Raster-graphics kunnen ook worden bewerkt of vanaf scratch worden ontwerpen in programma’s als Photoshop, Gimp en Paint. De meeste image editing-softwarepakketten bieden hiernaast ook veel verschillende functies om de pixels te beïnvloeden. Van knippen en plakken tot complexe en intelligente filters.

Vector-graphics

Vector-bestanden zijn een ander verhaal. Een vector-afbeelding werkt niet met pixels, maar bestaat uit wiskundige formules waarmee de afbeelding wordt opgebouwd. Zo worden van een cirkel bijvoorbeeld het middelpunt, de straal en een vulkleur opgeslagen. Dit resulteert in aanzienlijk minder data ten opzichte van het raster-principe, waarbij alle pixels van de afbeelding moeten worden opgeslagen. Compressietechnieken laat ik voor het gemak even buiten beschouwing.

Toepassingen vector-graphics

Vooral voor drukwerk en logo-ontwerpen is dit formaat erg handig. Maar het wordt ook in toenemende mate toegepast op websites, in interactieve animaties en voor online maps. Vector-graphics worden meestal ontworpen door een professionele designer. Enkele uitzonderingen daargelaten worden vector-graphics door alle gangbare browsers voor zowel desktop als mobiele apparaten goed ondersteund.

Om vector-afbeeldingen te ontwerpen bestaan verschillende programma's, zoals Adobe Illustrator, Inkscape en CorelDraw. Ten opzichte van raster-graphics, is voor het ontwerpen van vector-graphics meer specifieke technische kennis en vooral veel oefening vereist. Vooral als de vector-graphics gebruikt gaan worden in interactieve animaties online is specialistische kennis en ervaring met verschillende optimalisatietechnieken zeker aan te raden. Dit maakt echt het verschil. Je animaties moeten snel laden, goed weergeven en vloeiend spelen op alle gangbare apparaten en browsers.

Astroids

Al in 1979, toen Atari haar beroemde arcade-spel Astroids lanceerde, werden daarin, misschien wel voor het eerst in de geschiedenis, geprogrammeerde vector-graphics gebruikt. De spel-kast was zelfs speciaal uitgerust met een vector-scherm om deze graphics te kunnen weergeven. Tegenwoordig bestaan computerschermen echter uit pixels en moet een vector-graphic dus altijd eerst worden omgezet naar pixels voordat deze kan worden weergegeven. Maar maak je geen zorgen, dat gebeurt automatisch in een oogwenk zonder dat je het doorhebt.

Hoe zit het met het schalen en zoomen van afbeeldingen?

Schalen van raster-graphics

Raster-graphics verliezen snel kwaliteit bij schalen of zoomen. De kleine rechthoekige pixels waaruit de afbeelding bestaat worden ongewenst zichtbaar als de afbeelding wordt vergroot. Ook bij het verkleinen van een bitmap ontstaat vervorming door het wegvallen van pixels.

Probeer het zelf

Om dit te verduidelijken heb ik twee interactieve demo’s voor je gemaakt. De eerste werkt met raster-graphics en de tweede met vector-graphics (zie hieronder). Gebruik de + en - knoppen om te zoomen. Op een touchscreen kun je ook zoomen met twee vingers, zoals je vermoedelijk al gewend bent in andere applicaties. Je kunt de animatie ook verplaatsen. Met de middelste knop wordt de animatie weer gecentreerd en de zoom gereset.

Focus je op de zeester in de animatie en zoom hier zoveel mogelijk op in. Let daarbij op de graphics. Alhoewel je browser de ‘vieze randen’ nog iets probeert te verzachten, worden de wazige pixels al snel storend zichtbaar.

Zoom nu de animatie uit, zover als je kunt. Vooral als je een scherm hebt met een lage resolutie, zoals een telefoon, zul je nu gaan zien dat er ook nu verstoringen ontstaan. Je browser probeert nu de animatie zo goed mogelijk weer te geven, maar heeft hiervoor minder schermpixels ter beschikking en zal daarom compromissen moeten sluiten.

Schalen van vector-graphics

Een vector-afbeelding daarentegen is vanwege de schaalbare wiskundige formules eindeloos te vergroten en verkleinen met behoud van scherpte. Dit is een groot voordeel van dit formaat.

Kijk nu eens naar de volgende animatie. Deze lijkt exact op de vorige animatie, maar de onderliggende techniek is nu geprogrammeerd op basis van vectoren. Focus je ogen nu nog opnieuw op de zeester en gebruik de zoom. Zie je hoe haarscherp de graphics blijven, hoeveel je ook in- of uitzoomt?

Nadelen vector-graphics

Wow! Vector-graphics lijken dus ideaal! Ze zijn oneindig schaalbaar en hebben vaak ook nog een aanzienlijk kleinere bestandsgrootte. Maar waarom gebruiken we dan nog steeds raster-graphics? Helaas, ook vector-graphics hebben nadelen. Ze zijn niet erg goed in het weergeven van kleurverlopen en filters. Niet iedere afbeelding kan dus worden opgebouwd uit vectoren. Vooral het omzetten van foto's naar vectoren is praktisch onmogelijk en levert zelfs aanzienlijk grotere bestanden op dan de originele foto.

Hiernaast is er vooral bij gebruik in interactieve animaties nog een ander belangrijk nadeel aan vectoren. Ze moeten steeds opnieuw worden omgezet in pixels zodat de monitor ze kan weergeven. In geval van animaties tot wel 60 keer per seconde. En dat kost veel rekenkracht. In tegenstelling tot raster-graphics die al uit pixels bestaan en welke door trucs van de grafische kaart zelfs nog extra kunnen worden versneld.

En hoe zit het met het converteren van het ene naar het andere type?

Bestanden converteren

Het omzetten van vector naar raster is eenvoudig en vaak een kwestie van een export naar een ander bestandsformaat. Raster naar vector omzetten (outlining of vectorizing) is iets ingewikkelder. En gaat, als dit automatisch gebeurt, altijd gepaard met vervorming. Dit kan in veel gevallen wel gemakkelijk handmatig worden bijgewerkt naderhand. Maar in de praktijk kan een raster-afbeelding in veel gevallen beter worden overgetekend of nagemaakt met vectoren door een ervaren professional. Dit levert vaak het beste resultaat op. Eenmaal omgezet naar een vector-bestand is de afbeelding natuurlijk wel een echte vector en dus oneindig te schalen zonder kwaliteitsverlies.

Hybride formaten

Er bestaan ook hybride bestandsformaten, die dus zowel raster, vector of beiden kunnen bevatten. Bijvoorbeeld PDF en EPS. Deze bestanden kunnen voor verwarring zorgen bij het uitwisselen van graphics, omdat je aan de extensie niet kunt zien of het bestand vector- of raster-graphics bevat, of beide.

Overigens bieden softwarepakketten vaak een mogelijkheid om ook het andere formaat te importeren. Zo kan Photoshop vector-bestanden importeren en hier intern mee werken en kan Illustrator ook raster-afbeeldingen importeren, ook al zijn deze programma's daar in principe oorspronkelijk niet voor gemaakt. Hun eigen bestandsformaten PSD en AI kunnen dus ook zowel vector- als raster-graphics in hetzelfde bestand bevatten.

Hoge-resolutie schermen

Als laatste nog een klein uitstapje naar HiDPI en Retina. Deze scherm types hebben minimaal tweemaal zoveel pixels als een normaal scherm en de schermpixels zijn naar rato verkleind. Hierdoor kunnen graphics veel scherper worden weergegeven. Om van deze extra scherpte gebruik te maken moeten de graphics dan wel een corresponderend aantal pixels bevatten. Tenminste, als het gaat om raster-graphics. Want vector-graphics hoeven voor Retina-schermen niet te worden aangepast, omdat deze van zichzelf al eindeloos schaalbaar zijn.

Conclusie

Tot zover de belangrijkste verschillen tussen de twee formaten in een notendop. Natuurlijk is dit slechts de top van de ijsberg, maar je zult nu in ieder geval hopelijk beter begrijpen wat de belangrijkste kenmerken zijn. En inzien dat er geen one-format-fits-all bestaat. Beide types hebben zo hun voor- en nadelen en hun eigen toepassingen. Een deskundige ontwikkelaar zal hier altijd rekening mee houden. Vooral bij de ontwikkeling van interactieve animaties voor gebruik op internet. Alle factoren afwegend voor je unieke project, zal hij of zij het beste formaat of een mix hiervan kiezen, zodat de best mogelijke kwaliteit en snelheid kunnen worden gehaald. Ervoor zorgend dat de animerende graphics in alle gangbare browsers, op alle gangbare apparaten soepel en technisch goed worden weergeven. Zo kun jij dit aan de expert overlaten en je richten op andere belangrijke zaken!