Web Design: Verständnis Bitmaps und Vektorgrafik

Alle Grafiken, die Sie im Web begegnen, sind entweder Bitmap- oder Vektorgrafiken. Der grundlegende Unterschied zwischen den beiden ist, wie sie auf dem Bildschirm gezeichnet sind. Diese einfache Detail wirkt sich auf alles aus Bildauflösung auf Dateigröße und das Format.

Bitmaps: Ein Gewebe aus Pixeln

Wenn Bitmap-Bilder zu erklären, man denke an die Lite Brite. Diejenigen von Ihnen, wurden verwöhnt genug, um als Kinder mit diesem Spielzeug zu spielen daran erinnern, dass Sie kleine farbige Stifte in ein Gitter und dann legte den Schalter angeschlossen, sie zu leuchten.

Bitmaps arbeiten so ziemlich die gleiche Weise. Vereinfacht ausgedrückt, ein Bitmap Grafik ist ein Raster mit kleinen farbigen Pixeln gefüllt. Um eine Bitmap-Grafik am Bildschirm zu zeichnen, legt der Computer ein Gitter aus, sagen wir 100 x 100 Pixel, und dann Karten eine Farbe jedes einzelnen Pixels. Das ist 10.000 Pixel zu zeichnen! Denken Sie daran, ein Pixel ist 1/72 über Zoll. Deshalb, wenn ein Bild mit einer Auflösung von 72 dpi und ist 100 Pixel breit, wie es scheint nur einen Zoll breit auf dem Computerbildschirm. Die folgende Abbildung ist typisch für eine Bitmap.

Vektor-Bilder im Internet

Wenn Sie die Lite Brite kann mich nicht erinnern, dann erinnern Sie sich sicher # 147-Verbinde die Punkte. # 148- Vektorgrafiken verwenden eine ähnliche Strategie. Eine mathematische Formel Orte Punkte auf dem Bildschirm und verbindet sie dann mit Pfade. Um zum Beispiel eine dreieckförmige Vektor-Grafik-Bildschirm zu zeichnen, legt der Computer einfach drei Punkte nach unten, verbindet sie und füllt sie dann mit einer Farbe. Im zweiten Beispiel können Sie eine Handvoll Punkte sehen - einige mit Griffen aus von ihnen kommen. Diese Griffe steuern die Kurve des Weges zwischen zwei Punkten - bekannt als B # 233-zier Kurve zu denen in Wissen. Die folgende Abbildung funktionieren würde als ein Vektor in Ordnung.

Wenn Sie denken, dass die Vektoren Grafiken am Bildschirm wesentlich effizienter als Bitmaps zeichnen können, haben Sie Recht. Vektorgrafiken haben extrem kleine Dateigrößen, so dass sie ideal für Online-Lieferung. Beide Vektor- und Bitmap-Grafiken, jedoch haben ihre Vor- und Nachteile.

Der Vektor-Bitmap-Showdown

Als Web-Designer, sollten Sie ein paar Dinge über die Höhen und Tiefen von Vektoren und Bitmaps wissen, bevor Sie Ihr erstes Pixel drücken:

• Bitmaps sind auf dem Netz sehr weit verbreitet. Alle JPEG, GIF und PNG-Grafiken, die Sie im Web begegnen, sind Bitmaps. Ironischerweise begann viele dieser Grafiken Leben als Vektoren, bevor sie in Bitmaps umgewandelt wurden. Warum mit Vektoren entwerfen? Da Grafiken und interessante Effekte mit Vektoren Zeichnung ist oft schneller und einfacher als die gleiche Wirkung mit Bitmap-Grafiken zu erstellen. Es ist auch viel einfacher, Änderungen an Vektoren zu machen, weil man nur einen Punkt zu verschieben und die Linie folgt. Und wenn Sie möchten, können Sie die Grafik nach oben oder unten, Vektorgrafiken skalieren tun, ohne die Bildqualität zu verlieren. Um Änderungen an Bitmaps machen, müssen Sie häufig Teile davon neu zu zeichnen.

• Bitmaps können nicht die Qualität beizubehalten, wenn sie der Größe verändert werden. Bitmap-Grafiken haben Auflösungen festgelegt. Bitmap-Grafiken werden auf einem Raster von Pixeln angelegt. Wie Halb-Zoll-Klasse Maschendraht, ist dieses Gitter eine feste Größe. Und wie Hühnerdraht, wenn Sie das Bild strecken, beenden Sie mit verzerrtem versauen. Zwar ist es möglich, HTML-Code verwenden, um neue Höhen und Breiten für ein Bild zu geben, all dies tut, ist Strecke und das Bild verzerren. Besser Ihre Bilder die richtige Größe in erster Linie zu machen.

• Vektorgrafiken können leicht geändert werden. Vektorgrafik, auf der anderen Seite sind auflösungsunabhängig. Weil sie nach einer mathematischen Formel der Platzierung Punkte auf dem Bildschirm gezeichnet, die Gittergröße (Auflösung) keine Rolle spielt. Das heißt, Sie unendlich zerquetschen können und strecken Vektorgrafiken nach oben, unten und von Seite zu Seite, ohne die Bildqualität zu verlieren: Sie sind die Play-Doh # 174- der Bahn. Auch die folgenden beiden Figuren.

  
  Es ist einfach, die Farben zu ändern, oder die Form dieses Vektor-gezeichneten Bild ändern, indem seine Punkte ohne jeglichen Qualitätsverlust zu bewegen.
  
  Wenn Sie ein Bitmap-Bild dehnen und stauchen, beginnt sie die Bildqualität zu verlieren und verschwommen aussehen kann.