Neben text­ba­sier­ten Inhalten sind Bilder zentrale Elemente einer Website. Fürs Webdesign finden sich zwei Klassen von Com­pu­ter­gra­fi­ken, die sich in ihren Ei­gen­schaf­ten grund­le­gend un­ter­schei­den: Pi­xel­gra­fi­ken und Vek­tor­gra­fi­ken. Wir verraten Ihnen, wie diese Gra­fik­ty­pen aufgebaut sind und welche An­wen­dungs­be­rei­che sich aus den spe­zi­fi­schen Ei­gen­schaf­ten ergeben.

Pi­xel­gra­fi­ken

Die kleinste Einheit einer jeden Pi­xel­gra­fik ist der Bildpunkt (Pixel), dem ein spe­zi­el­ler Farbwert zu­ge­ord­net ist. Da Com­pu­ter­gra­fi­ken dieser Art aus einer Vielzahl qua­dra­ti­scher Bild­punk­te bestehen, die in einem Raster an­ge­ord­net sind, werden Pi­xel­gra­fi­ken auch Ras­ter­gra­fi­ken genannt. Die zentralen Ei­gen­schaf­ten, mit denen sich Pi­xel­gra­fi­ken be­schrei­ben lassen, sind die Anzahl der ver­wen­de­ten Bild­punk­te und die Farbtiefe der einzelnen Pixel. Während die Ge­samt­an­zahl der Pixel die Höhe und Breite einer Grafik und somit die Bild­auf­lö­sung be­stimm­ten, lassen sich durch die Farbtiefe Farb- und Hel­lig­keits­wer­te für jeden einzelnen Bildpunkt de­fi­nie­ren.

Mit diesen Ei­gen­schaf­ten bieten sich Pi­xel­gra­fi­ken zur Abbildung de­tail­lier­ter Bilder wie an. Klas­si­sche Beispiele sind Fotos einer Di­gi­tal­ka­me­ra oder mit einem Scanner erstellte Bilder. Da Pi­xel­gra­fi­ken aus einer fest­ge­leg­ten Anzahl an Bild­punk­ten bestehen, sind sowohl die Qualität als auch der Spei­cher­be­darf dieser Grafiken abhängig von der Ge­samt­an­zahl der Pixel. Je mehr Pixel eine Ras­ter­gra­fik aufweist, desto größer kann diese dar­ge­stellt werden und desto mehr Speicher benötigt die Datei. Die Ab­hän­gig­keit von Bild­qua­li­tät und Pi­xel­an­zahl hat zur Folge, dass sich Pi­xel­gra­fi­ken nicht ver­lust­frei skalieren lassen.

Vek­tor­gra­fi­ken

Anders als Pi­xel­gra­fi­ken bestehen Vek­tor­gra­fi­ken nicht aus einzelnen Bild­punk­ten, sondern aus so­ge­nann­ten gra­fi­schen Pri­mi­ti­ven wie Linien, Kreisen oder Kurven, die durch Parameter wie An­fangs­punkt, Endpunkt, Radius, Kan­ten­län­ge, Li­ni­en­stär­ke, Farbe und Füll­mus­ter definiert werden. Moderne Vek­tor­zei­chen­pro­gram­me geben zudem Farb­ver­läu­fe und Trans­pa­renz wieder. Diese Objekte werden nicht als eine Anreihung von Pixeln definiert, sondern anhand ihrer Ei­gen­schaf­ten logisch be­schrie­ben. Für die Be­schrei­bung eines einfachen Kreises werden bei einer Vek­tor­gra­fik somit aus­schließ­lich die Lage des Mit­tel­punk­tes und der Radius sowie Farbe und Li­ni­en­stär­ke benötigt, um das Objekt in jeder denkbaren Größe dar­zu­stel­len.

Hier zeigt sich der große Vorteil von Vek­tor­gra­fi­ken gegenüber Ras­ter­gra­fi­ken: Ein Bild, das un­ab­hän­gig von Bild­punk­ten anhand von Ob­jek­tei­gen­schaf­ten be­schrie­ben wird, lässt sich ohne Qua­li­täts­ver­lust beliebig skalieren, da die ge­spei­cher­ten Parameter einfach auf die neue Größe um­ge­rech­net werden. Ein Kreis hingegen, der in einer Pi­xel­gra­fik durch eine genau fest­ge­leg­te Anzahl an Bild­punk­ten definiert wurde, zeigt ab einer be­stimm­ten Ver­grö­ße­rung Treppen- oder Alias-Effekte, bei denen die einzelnen Pixel zum Vorschein treten. Die Dar­stel­lungs­grö­ße einer Vek­tor­gra­fik hat im Gegensatz zur Pi­xel­gra­fik, bei der für groß­for­ma­ti­ge Bilder auch pro­por­tio­nal mehr Bild­punk­te benötigt werden, keinen Einfluss auf den Spei­cher­be­darf. Dieser ergibt sich statt­des­sen aus der Anzahl der der ge­spei­cher­ten Parameter.

Da alle gängigen An­zei­ge­me­di­en (Bild­schirm, Druck) Bilder aus­schließ­lich als Ras­ter­gra­fi­ken ausgeben, müssen Vek­tor­gra­fi­ken vor der Dar­stel­lung zu Ras­ter­gra­fi­ken kon­ver­tiert werden (Rasterung). Je nach Kom­ple­xi­tät der be­schrie­be­nen Objekte kostet dieser Schritt sowohl Zeit als auch Re­chen­leis­tung.

Da­tei­for­ma­te und Gra­fik­pro­gram­me

Für die Er­stel­lung und Be­ar­bei­tung von Raster- und Pi­xel­gra­fi­ken findet sich eine Vielzahl von Gra­fik­pro­gram­men, die eine Reihe spe­zi­fi­scher Da­tei­for­ma­te un­ter­stüt­zen. Die folgende Tabelle zeigt eine Auswahl ge­läu­fi­ger Gra­fik­for­ma­te und Be­ar­bei­tungs­pro­gram­me für Raster- und Vek­tor­gra­fi­ken.

  Gra­fik­for­ma­te Gra­fik­pro­gram­me
Pi­xel­gra­fik TIF, JPG, BMP, PNG, GIF Adobe Photoshop, GIMP, Corel PaintShop Pro
Vek­tor­gra­fik: SVG, EPS, AI, CDR, WMF Adobe Il­lus­tra­tor, Corel Draw, Inkscape

An­wen­dungs­be­rei­che

Durch die ver­lust­freie Ska­lie­rung eignen sich Vek­tor­gra­fi­ken besonders für die Dar­stel­lung von Dia­gram­men, Fir­men­lo­gos, geo­me­tri­schen Figuren, Schriften, Icons und tech­ni­schen Zeich­nun­gen. Komplexe Bilder wie Di­gi­tal­fo­tos na­tür­li­cher Objekte mit vielen ver­schie­de­nen Farb- und Hel­lig­keits­wer­ten lassen sich durch Vektoren hingegen nicht ver­lust­frei dar­stel­len. Hier bieten sich Pi­xel­gra­fi­ken an.

Rasterung und Vek­to­ri­sie­rung

Während die Rasterung von Vek­tor­gra­fi­ken zu Pi­xel­gra­fi­ken keinen großen Aufwand darstellt und bei jeder Vek­tor­gra­fik, die gedruckt oder auf einem Bild­schirm dar­ge­stellt wird, im Hin­ter­grund abläuft, ist der um­ge­kehr­te Weg mit größeren An­stren­gun­gen verbunden. Die Vek­to­ri­sie­rung eines Ras­ter­bil­des erfolgt entweder durch manuelles Nach­zeich­nen oder mithilfe eines Vek­to­ri­sie­rungs­pro­gramms wie Xara Xtreme oder Inkscape, die ent­spre­chen­de Funk­tio­nen wie Bitmap Tracer oder Potrace zur Verfügung stellen. Eine solche Um­wand­lung ist jedoch feh­ler­an­fäl­lig, da sich Vek­to­ri­sie­rungs­pro­gram­me den komplexen Farb- oder Hel­lig­keits­ver­läu­fen in Pi­xel­gra­fi­ken nur annähern und diese als sichtbar ab­ge­grenz­te Bänder dar­stel­len (Banding).

VorteileNachteile
Pi­xel­gra­fik
  • Reich an Farb- und Hel­lig­keits­ab­stu­fun­gen
  • Jeder einzelne Bildpunkt lässt sich be­ar­bei­ten
  • Ska­lie­rung geht mit Qua­li­täts­ver­lust einher
  • Kom­pres­si­on kann zu Qua­li­täts­ver­lust führen
  • Hoher Spei­cher­be­darf bei qua­li­ta­tiv hoch­wer­ti­gen Grafiken
  • Vek­to­ri­sie­rung mit großem Aufwand verbunden
Vek­tor­gra­fik
  • Ohne Qua­li­täts­ver­lust ska­lier­bar
  • Ver­lust­freie Kom­pres­si­on
  • Ei­gen­schaf­ten von Objekten lassen sich beliebig anpassen
  • Leicht zu rastern
  • Nicht geeignet für komplexe grafische Dar­stel­lun­gen
  • Wie­der­ga­be erfordert Rasterung
Zum Hauptmenü